@ukho/admiralty-core 0.4.6 → 0.5.0

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-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)));
+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-b5beb563",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-3e91e95a",[[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-620e0985",[[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-20c06ebe",[[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-40bc8d7f",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-input-invalid"],[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","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"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","value","label","hint","placeholder","resultsOnInitFocus","filterResult","disabled","invalid","invalidMessage","width","maxLength","height","heading","colour","clickAction","actionText","filterTitle","groupTitle","pages","currentPage","name","displayVertical","active","first","type","multiple","files","headerTitle","headerTitleUrl","logoLinkUrl","logoImgUrl","logoAltText","mobileMenuOpen","displayHamburger","progression","error","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,QAAA,IAAAC,eAAA,sBAAAN,KAAA,IAAAD,MAAA,IAAAQ,MAAA,IAAAT,MAAA,mDAAAC,MAAA,IAAAC,KAAA,IAAAO,MAAA,IAAAC,UAAA,iBAAAJ,SAAA,IAAAC,QAAA,IAAAC,eAAA,sBAAAR,MAAA,uDAAAS,MAAA,IAAAE,OAAA,IAAAC,QAAA,IAAAC,OAAA,IAAAC,YAAA,KAAAC,WAAA,4DAAAC,YAAA,mEAAAC,WAAA,+DAAAC,MAAA,IAAAC,YAAA,mBAAAlB,MAAA,mDAAAmB,KAAA,IAAApB,MAAA,OAAAqB,gBAAA,uBAAAd,QAAA,IAAAC,eAAA,oEAAAc,OAAA,IAAAC,MAAA,IAAA5B,KAAA,gDAAA6B,KAAA,IAAAZ,QAAA,kDAAAX,MAAA,IAAAwB,SAAA,IAAAC,MAAA,+CAAAC,YAAA,mBAAAC,eAAA,uBAAAC,YAAA,oBAAAC,WAAA,mBAAAC,YAAA,oBAAAC,eAAA,KAAAC,iBAAA,qDAAAhC,MAAA,IAAAiC,YAAA,IAAAC,MAAA,IAAAC,iBAAA,kDAAAxB,QAAA,IAAAyB,SAAA,0FAAAzB,QAAA,gDAAA0B,cAAA,qBAAAhC,SAAA,IAAAc,KAAA,IAAAmB,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,6CAAA9B,KAAA,IAAApB,MAAA,OAAAM,SAAA,IAAAiC,QAAA,OAAAhC,QAAA,IAAA4C,eAAA,KAAAC,kBAAA,iDAAAnD,MAAA,qDAAAoD,cAAA,uBAAAC,aAAA,oBAAAC,UAAA,mKAAAtD,MAAA,IAAAuD,WAAA,mBAAAC,aAAA,kEAAAC,cAAA,iEAAAC,QAAA,2RAAA3D,MAAA,4CAAA4D,SAAA,gBAAAC,WAAA,2DAAAzC,KAAA,IAAAnB,MAAA,IAAAC,KAAA,IAAAI,SAAA,IAAAkB,KAAA,IAAArB,YAAA,IAAAM,MAAA,IAAAC,UAAA,iBAAAoD,SAAA,IAAAvD,QAAA,IAAAC,eAAA,sBAAAuD,aAAA,IAAA/D,MAAA,oDAAAY,QAAA,IAAAyB,SAAA,OAAA2B,kBAAA,0BAAAC,WAAA,4DAAAC,QAAA,IAAAC,KAAA,IAAA7D,SAAA,MAAAkB,KAAA,4CAAAlB,SAAA,0DAAAA,SAAA,IAAA8D,IAAA,SAAAtE"}

package/dist/admiralty/p-20c06ebe.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s}from"./p-a2b7bb90.js";const n=".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:6px}";const a=class{constructor(s){t(this,s);this.admiraltyInput=i(this,"admiraltyInput",7);this.inputId=`admiralty-input-${++e}`;this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}};this.name=this.inputId;this.label=undefined;this.hint=undefined;this.disabled=false;this.type="text";this.placeholder=undefined;this.width=undefined;this.maxLength=undefined;this.required=false;this.invalid=false;this.invalidMessage=undefined;this.autocomplete="off";this.value=""}valueChanged(){const t=this.nativeInput;const i=this.getValue();if(t&&t.value!==i){t.value=i}this.admiraltyInput.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return s("div",{class:"text-input-container"},this.label?s("admiralty-label",{disabled:this.disabled,for:this.inputId},this.label):null,this.hint?s("admiralty-hint",{disabled:this.disabled},this.hint):null,s("input",{ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:this.inputId,name:this.name,type:this.type,value:t,maxLength:this.maxLength,onInput:this.onInput,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null}}),s("admiralty-input-invalid",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let e=0;a.style=n;export{a as admiralty_input};
+//# sourceMappingURL=p-20c06ebe.entry.js.map

package/dist/admiralty/p-20c06ebe.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyInput","emit","toString","render","h","class","label","disabled","for","hint","ref","invalid","id","name","type","maxLength","placeholder","autoComplete","autocomplete","required","style","maxWidth","width","visibility","invalidMessage"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\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    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-invalid {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\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 label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: 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  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,g5B,MCeJC,EAAc,M,wEACzBC,KAAAC,QAAkB,qBAAqBC,IAuF/BF,KAAAG,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,aAnFTP,KAAKC,Q,uDAeT,M,UAK6D,O,uFAoBpD,M,aAKD,M,gDAUI,M,WAK2B,E,CAWhDO,eACR,MAAMC,EAAcT,KAAKS,YACzB,MAAMF,EAAQP,KAAKU,WACnB,GAAID,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBP,KAAKW,eAAeC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU9EH,WACN,cAAcV,KAAKO,QAAU,SAAWP,KAAKO,MAAMM,YAAcb,KAAKO,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQP,KAAKU,WACnB,OACEK,EAAA,OAAKC,MAAM,wBACRhB,KAAKiB,MACJF,EAAA,mBAAiBG,SAAUlB,KAAKkB,SAAUC,IAAKnB,KAAKC,SACjDD,KAAKiB,OAEN,KACHjB,KAAKoB,KAAOL,EAAA,kBAAgBG,SAAUlB,KAAKkB,UAAWlB,KAAKoB,MAAyB,KACrFL,EAAA,SACEM,IAAKhB,GAAUL,KAAKS,YAAcJ,EAClCW,MAAO,CAAEE,SAAUlB,KAAKkB,SAAUI,QAAStB,KAAKsB,SAChDJ,SAAUlB,KAAKkB,SACfK,GAAIvB,KAAKC,QACTuB,KAAMxB,KAAKwB,KACXC,KAAMzB,KAAKyB,KACXlB,MAAOA,EACPmB,UAAW1B,KAAK0B,UAChBvB,QAASH,KAAKG,QACdwB,YAAa3B,KAAK2B,YAClBC,aAAc5B,KAAK6B,aACnBC,SAAU9B,KAAK8B,SACfC,MAAO,CACLC,SAAUhC,KAAKiC,MAAQ,GAAGjC,KAAKiC,UAAY,QAG/ClB,EAAA,2BAAyBgB,MAAO,CAAEG,WAAYlC,KAAKsB,SAAWtB,KAAKmC,eAAiB,UAAY,WAAanC,KAAKmC,gB,wDAK1H,IAAIjC,EAAS,E"}

package/dist/admiralty/{p-27286b0d.entry.js → p-3e91e95a.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as a,h as e,H as i}from"./p-a2b7bb90.js";const r='@charset "UTF-8";@media (max-width: 1023px){.desktop-only.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-textarea{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-textarea{display:none}}*.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*.sc-admiralty-textarea{font-size:16px}}a.sc-admiralty-textarea{color:#09315b}a.sc-admiralty-textarea:focus{outline:3px solid #ffdd00;outline-offset:1px}h1.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:48px;line-height:60px;margin:0 0 30px 0}@media (max-width: 1023px){h1.sc-admiralty-textarea{font-size:46px;line-height:54px}}h2.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:36px;line-height:48px;margin-bottom:18px}@media (max-width: 1023px){h2.sc-admiralty-textarea{font-size:34px;line-height:42px}}h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:21px;line-height:30px;margin-bottom:12px}@media (max-width: 1023px){h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-size:20px;line-height:30px}}h6.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:18px;line-height:24px;margin-bottom:12px}@media (max-width: 1023px){h6.sc-admiralty-textarea{font-size:16px}}p.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;margin-bottom:30px}.intro.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro.sc-admiralty-textarea{font-size:26px}}.small.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small.sc-admiralty-textarea{font-size:14px;line-height:22px}}blockquote.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;line-height:30px;width:100%;padding:24px 18px;border-left:5px solid #09315b;margin-bottom:30px;background:#eeeeee}@media (max-width: 1023px){blockquote.sc-admiralty-textarea{line-height:24px}}ul.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none}ul.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ul.sc-admiralty-textarea li.sc-admiralty-textarea{margin-bottom:12px}ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:"■";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{font-size:8px}}ol.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none;counter-reset:li}ol.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ol.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:counter(li) ".";color:#03284f;font-size:18px;margin-right:12px}ol.sc-admiralty-textarea li.sc-admiralty-textarea{counter-increment:li;margin-bottom:12px}.white-text.sc-admiralty-textarea *.sc-admiralty-textarea{color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea{display:block;position:relative;width:100%;min-height:170px;border:2px solid #333333;color:#333333;padding:12px 18px;outline:none;resize:vertical;overflow:auto;box-sizing:border-box;vertical-align:top;background-color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea:focus-visible{outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea{border-color:#e20d0d}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-area-container.sc-admiralty-textarea textarea.disabled.sc-admiralty-textarea{color:#adadad;border-color:#adadad;background:#ffffff}';let s=0;const l=class{constructor(e){t(this,e);this.textareaBlur=a(this,"textareaBlur",7);this.admiraltyInput=a(this,"admiraltyInput",7);this.inputId=`admiralty-textarea-${s++}`;this.onBlur=()=>{this.textareaBlur.emit()};this.onInput=t=>{const a=t.target;if(a){this.value=a.value||""}};this.label="";this.hint=undefined;this.width=undefined;this.maxLength=undefined;this.disabled=false;this.invalid=false;this.invalidMessage=undefined;this.value=""}valueChanged(){const t=this.nativeTextArea;const a=this.getValue();if(t&&t.value!==a){t.value=a}this.admiraltyInput.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return e(i,null,e("div",{class:"text-area-container"},this.label?e("admiralty-label",{for:this.inputId,disabled:this.disabled},this.label):null,this.hint?e("admiralty-hint",{disabled:this.disabled},this.hint):null,e("textarea",{ref:t=>this.nativeTextArea=t,class:{disabled:this.disabled,invalid:this.invalid},style:this.width?{maxWidth:`${this.width}px`}:{},id:this.inputId,value:t,maxLength:this.maxLength,onInput:this.onInput,onBlur:this.onBlur}),this.invalid&&this.invalidMessage?e("admiralty-input-error",null,this.invalidMessage):null))}static get watchers(){return{value:["valueChanged"]}}};l.style=r;export{l as admiralty_textarea};
-//# sourceMappingURL=p-27286b0d.entry.js.map
+import{r as t,c as a,h as e,H as i}from"./p-a2b7bb90.js";const r='@charset "UTF-8";@media (max-width: 1023px){.desktop-only.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-textarea{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-textarea{display:none}}*.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*.sc-admiralty-textarea{font-size:16px}}a.sc-admiralty-textarea{color:#09315b}a.sc-admiralty-textarea:focus{outline:3px solid #ffdd00;outline-offset:1px}h1.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:48px;line-height:60px;margin:0 0 30px 0}@media (max-width: 1023px){h1.sc-admiralty-textarea{font-size:46px;line-height:54px}}h2.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:36px;line-height:48px;margin-bottom:18px}@media (max-width: 1023px){h2.sc-admiralty-textarea{font-size:34px;line-height:42px}}h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:21px;line-height:30px;margin-bottom:12px}@media (max-width: 1023px){h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-size:20px;line-height:30px}}h6.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:18px;line-height:24px;margin-bottom:12px}@media (max-width: 1023px){h6.sc-admiralty-textarea{font-size:16px}}p.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;margin-bottom:30px}.intro.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro.sc-admiralty-textarea{font-size:26px}}.small.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small.sc-admiralty-textarea{font-size:14px;line-height:22px}}blockquote.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;line-height:30px;width:100%;padding:24px 18px;border-left:5px solid #09315b;margin-bottom:30px;background:#eeeeee}@media (max-width: 1023px){blockquote.sc-admiralty-textarea{line-height:24px}}ul.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none}ul.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ul.sc-admiralty-textarea li.sc-admiralty-textarea{margin-bottom:12px}ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:"■";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{font-size:8px}}ol.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none;counter-reset:li}ol.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ol.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:counter(li) ".";color:#03284f;font-size:18px;margin-right:12px}ol.sc-admiralty-textarea li.sc-admiralty-textarea{counter-increment:li;margin-bottom:12px}.white-text.sc-admiralty-textarea *.sc-admiralty-textarea{color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea{display:block;position:relative;width:100%;min-height:170px;border:2px solid #333333;color:#333333;padding:12px 18px;outline:none;resize:vertical;overflow:auto;box-sizing:border-box;vertical-align:top;background-color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea:focus-visible{outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea{border-color:#e20d0d}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-area-container.sc-admiralty-textarea textarea.disabled.sc-admiralty-textarea{color:#adadad;border-color:#adadad;background:#ffffff}';let s=0;const l=class{constructor(e){t(this,e);this.textareaBlur=a(this,"textareaBlur",7);this.admiraltyInput=a(this,"admiraltyInput",7);this.inputId=`admiralty-textarea-${s++}`;this.onBlur=()=>{this.textareaBlur.emit()};this.onInput=t=>{const a=t.target;if(a){this.value=a.value||""}};this.label="";this.hint=undefined;this.width=undefined;this.maxLength=undefined;this.disabled=false;this.invalid=false;this.invalidMessage=undefined;this.value=""}valueChanged(){const t=this.nativeTextArea;const a=this.getValue();if(t&&t.value!==a){t.value=a}this.admiraltyInput.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return e(i,null,e("div",{class:"text-area-container"},this.label?e("admiralty-label",{for:this.inputId,disabled:this.disabled},this.label):null,this.hint?e("admiralty-hint",{disabled:this.disabled},this.hint):null,e("textarea",{ref:t=>this.nativeTextArea=t,class:{disabled:this.disabled,invalid:this.invalid},style:this.width?{maxWidth:`${this.width}px`}:{},id:this.inputId,value:t,maxLength:this.maxLength,onInput:this.onInput,onBlur:this.onBlur}),e("admiralty-input-invalid",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage)))}static get watchers(){return{value:["valueChanged"]}}};l.style=r;export{l as admiralty_textarea};
+//# sourceMappingURL=p-3e91e95a.entry.js.map

package/dist/admiralty/p-3e91e95a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","textareaIds","TextareaComponent","this","inputId","onBlur","textareaBlur","emit","onInput","ev","input","target","value","valueChanged","nativeInput","nativeTextArea","getValue","admiraltyInput","toString","render","h","Host","class","label","for","disabled","hint","ref","textArea","invalid","style","width","maxWidth","id","maxLength","visibility","invalidMessage"],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/base/responsive\";\n@use \"../../scss/base/typography\";\n@use \"../../scss/vars/typography\" as typography-vars;\n\n\n.text-area-container {\n  textarea {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-height: 170px;\n    border: 2px solid colours.$colour-text;\n    color: colours.$colour-text;\n    padding: 12px 18px;\n    outline: none;\n    resize: vertical;\n    overflow: auto;\n    box-sizing: border-box;\n    vertical-align: top;\n\n    background-color: colours.$colour-white;\n\n    &:focus-visible {\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\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    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { TextAreaChangeEventDetail } from './textarea.interface';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  private nativeTextArea?: HTMLTextAreaElement;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: 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  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event admiraltyChange\n   */\n  @Event() admiraltyInput: EventEmitter<TextAreaChangeEventDetail>;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeTextArea;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            ref={textArea => (this.nativeTextArea = textArea)}\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            value={value}\n            maxLength={this.maxLength}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n          ></textarea>\n          <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,g+ICGpB,IAAIC,EAAc,E,MAOLC,EAAiB,M,mHACpBC,KAAAC,QAAU,sBAAsBH,MAqEhCE,KAAAE,OAAS,KACfF,KAAKG,aAAaC,MAAM,EAGlBJ,KAAAK,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTP,KAAKS,MAAQF,EAAME,OAAS,E,cArER,G,gFAoBI,M,aAKD,M,yCAsB+B,E,CAMhDC,eACR,MAAMC,EAAcX,KAAKY,eACzB,MAAMH,EAAQT,KAAKa,WACnB,GAAIF,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBT,KAAKc,eAAeV,KAAK,CAAEK,MAAOT,KAAKS,OAAS,KAAOT,KAAKa,WAAab,KAAKS,MAAMM,Y,CAc9EF,WACN,cAAcb,KAAKS,QAAU,SAAWT,KAAKS,MAAMM,YAAcf,KAAKS,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQT,KAAKa,WACnB,OACEI,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,uBACRnB,KAAKoB,MACJH,EAAA,mBAAiBI,IAAKrB,KAAKC,QAASqB,SAAUtB,KAAKsB,UAChDtB,KAAKoB,OAEN,KACHpB,KAAKuB,KAAON,EAAA,kBAAgBK,SAAUtB,KAAKsB,UAAWtB,KAAKuB,MAAyB,KACrFN,EAAA,YACEO,IAAKC,GAAazB,KAAKY,eAAiBa,EACxCN,MAAO,CAAEG,SAAUtB,KAAKsB,SAAUI,QAAS1B,KAAK0B,SAChDC,MAAO3B,KAAK4B,MAAQ,CAAEC,SAAU,GAAG7B,KAAK4B,WAAc,GACtDE,GAAI9B,KAAKC,QACTQ,MAAOA,EACPsB,UAAW/B,KAAK+B,UAChB1B,QAASL,KAAKK,QACdH,OAAQF,KAAKE,SAEfe,EAAA,2BAAyBU,MAAO,CAAEK,WAAYhC,KAAK0B,SAAW1B,KAAKiC,eAAiB,UAAY,WAAajC,KAAKiC,iB"}

package/dist/admiralty/p-40bc8d7f.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as l,H as i}from"./p-a2b7bb90.js";import{a as t}from"./p-7151aba4.js";const s="p.sc-admiralty-hint{margin-top:0;margin-bottom:6px;display:block;font-weight:300}p.disabled.sc-admiralty-hint{color:#adadad}";const n=class{constructor(l){a(this,l);this.disabled=undefined}render(){return l("p",{class:{disabled:this.disabled}},l("slot",null))}};n.style=s;const r=".sc-admiralty-input-invalid-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-invalid{color:#e20d0d}p.sc-admiralty-input-invalid{margin:0;color:#e20d0d}";const d=class{constructor(l){a(this,l)}render(){return l(i,null,l("admiralty-icon",{"icon-name":t.iconName,class:"error-icon"}),l("p",null,l("slot",null)))}};d.style=r;const o="label.sc-admiralty-label{margin-bottom:6px;display:inline-block;font-weight:normal}label.disabled.sc-admiralty-label{color:#adadad}";const e=class{constructor(l){a(this,l);this.disabled=undefined;this.for=undefined}render(){return l("label",{htmlFor:this.for,class:{disabled:this.disabled}},l("slot",null))}};e.style=o;export{n as admiralty_hint,d as admiralty_input_invalid,e as admiralty_label};
+//# sourceMappingURL=p-40bc8d7f.entry.js.map

package/dist/admiralty/p-40bc8d7f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hintCss","HintComponent","render","h","class","disabled","this","inputInvalidCss","InputInvalidComponent","Host","faExclamation","iconName","labelCss","LabelComponent","htmlFor","for"],"sources":["./src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","./src/components/hint/hint.tsx","./src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","./src/components/input-invalid/input-invalid.tsx","./src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","./src/components/label/label.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: typography.$font-weight-light;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@use '../../scss/vars/colours';\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: colours.$colour-utility-error;\n}\n\np {\n  margin: 0;\n  color: colours.$colour-utility-error;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: typography.$font-weight-medium;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAU,+H,MCWHC,EAAa,M,iDAMxBC,SACE,OACEC,EAAA,KAAGC,MAAO,CAAEC,SAAUC,KAAKD,WACzBF,EAAA,a,aCpBR,MAAMI,EAAkB,6K,MCYXC,EAAqB,M,yBAChCN,SACE,OACEC,EAACM,EAAI,KACHN,EAAA,8BAA2BO,EAAcC,SAAUP,MAAM,eACzDD,EAAA,SACEA,EAAA,c,aClBV,MAAMS,EAAW,sI,MCWJC,EAAc,M,oEAWzBX,SACE,OACEC,EAAA,SAAOW,QAASR,KAAKS,IAAKX,MAAO,CAAEC,SAAUC,KAAKD,WAChDF,EAAA,a"}

package/dist/admiralty/{p-f43f9ff4.entry.js → p-620e0985.entry.js}

@@ -1,2 +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
+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-invalid",{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-620e0985.entry.js.map

package/dist/admiralty/{p-f43f9ff4.entry.js.map → p-620e0985.entry.js.map}

@@ -1 +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"}
+{"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-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\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,2BAAyBK,MAAO,CAAEC,WAAY3C,KAAK8B,SAAW9B,KAAK4C,eAAiB,UAAY,WAAa5C,KAAK4C,iB,2GAO5H,IAAI1C,EAAwB,E"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,H as e,g as l}from"./p-a2b7bb90.js";const a='.disabled.sc-admiralty-select{color:#adadad}.select-wrapper.sc-admiralty-select{position:relative}admiralty-icon.sc-admiralty-select{font-size:24px;font-weight:normal;pointer-events:none;position:absolute;right:12px;top:12px}select.sc-admiralty-select{appearance:none;background-color:#ffffff;border:2px solid #333333;box-sizing:border-box;color:#333333;font-family:"JohnstonITC", Helvetica, sans-serif;font-size:18px;line-height:24px;margin-bottom:6px;position:relative;font-weight:300;padding:12px;width:100%}select.invalid.sc-admiralty-select{border-color:#e20d0d}select.sc-admiralty-select:focus-visible{outline:3px solid #ffdd00;box-shadow:inset 0 0 0 2px #333333}select.disabled.sc-admiralty-select{border-color:#adadad}';const o=class{constructor(s){t(this,s);this.admiraltyChange=i(this,"admiraltyChange",7);this.admiraltyBlur=i(this,"admiraltyBlur",7);this.id=`admiralty-select-${++n}`;this.disabled=false;this.invalid=false;this.invalidMessage=null;this.hint=null;this.label="Choose a colour";this.width=undefined;this.value=""}valueChanged(){const t=this.nativeInput;const i=this.getValue();if(t&&t.value!==i){t.value=i}this.admiraltyChange.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}handleSelect(t){const i=t.target;if(i){this.value=i.value||""}}handleBlur(t){this.admiraltyBlur.emit()}selectOption(){const t=this.el.querySelectorAll("option");t.forEach((t=>{t.selected=t.value===this.getValue()}))}componentWillRender(){this.selectOption()}render(){const{disabled:t,hint:i,id:l,label:a}=this;const o=t?"disabled":"";return s(e,null,s("div",{class:`admiralty-select ${o}`},s("admiralty-label",{disabled:this.disabled,for:l},a),i?s("admiralty-hint",{disabled:this.disabled},i):null,s("div",{class:"select-wrapper",style:this.width?{maxWidth:`${this.width}px`}:{}},s("select",{ref:t=>this.nativeInput=t,id:l,class:{"admiralty-form-control":true,invalid:this.invalid,disabled:t},"aria-disabled":t?"true":"false","aria-label":a,onChange:t=>this.handleSelect(t),onBlur:t=>this.handleBlur(t),disabled:t},s("slot",null)),s("admiralty-icon",{class:`select-down-icon ${o}`,"icon-name":"angle-down"})),s("admiralty-input-invalid",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage)))}get el(){return l(this)}static get watchers(){return{value:["valueChanged"]}}};let n=0;o.style=a;export{o as admiralty_select};
+//# sourceMappingURL=p-b5beb563.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["selectCss","SelectComponent","this","id","nextId","valueChanged","nativeSelect","nativeInput","value","getValue","admiraltyChange","emit","toString","handleSelect","event","select","target","handleBlur","_event","admiraltyBlur","selectOption","options","el","querySelectorAll","forEach","option","selected","componentWillRender","render","disabled","hint","label","disabledClass","h","Host","class","for","style","width","maxWidth","ref","invalid","onChange","onBlur","visibility","invalidMessage"],"sources":["./src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.disabled {\n  color: colours.$colour-textinput-text-disabled;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\nadmiralty-icon {\n  font-size: 24px;\n  font-weight: typography.$font-weight-medium;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\nselect {\n  appearance: none;\n  background-color: colours.$colour-white;\n  border: 2px solid colours.$colour-text;\n  box-sizing: border-box;\n  color: colours.$colour-text;\n  font-family: typography.$font-family;\n  font-size: typography.$font-size-normal;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: typography.$font-weight-light;\n  padding: 12px;\n  width: 100%;\n\n  &.invalid {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &:focus-visible {\n    outline: 3px solid colours.$colour-utility-focus;\n    box-shadow: inset 0 0 0 2px colours.$colour-text;\n  }\n\n  &.disabled {\n    border-color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private nativeInput?: HTMLSelectElement;\n  id: string = `admiralty-select-${++nextId}`;\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={id}>\n            {label}\n          </admiralty-label>\n          {hint ? <admiralty-hint disabled={this.disabled}>{hint}</admiralty-hint> : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={id}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"mappings":"gEAAA,MAAMA,EAAY,ytB,MCQLC,EAAe,M,uHAG1BC,KAAAC,GAAa,sBAAsBC,I,cAIP,M,aAID,M,oBAIM,K,UAIV,K,WAIC,kB,gCAiBkC,E,CAGhDC,eACR,MAAMC,EAAeJ,KAAKK,YAC1B,MAAMC,EAAQN,KAAKO,WACnB,GAAIH,GAAgBA,EAAaE,QAAUA,EAAO,CAChDF,EAAaE,MAAQA,C,CAEvBN,KAAKQ,gBAAgBC,KAAK,CAAEH,MAAON,KAAKM,OAAS,KAAON,KAAKO,WAAaP,KAAKM,MAAMI,Y,CAG/EH,WACN,cAAcP,KAAKM,QAAU,SAAWN,KAAKM,MAAMI,YAAcV,KAAKM,OAAS,IAAII,U,CAGrFC,aAAaC,GACX,MAAMC,EAASD,EAAME,OACrB,GAAID,EAAQ,CACVb,KAAKM,MAAQO,EAAOP,OAAS,E,EAIjCS,WAAWC,GACThB,KAAKiB,cAAcR,M,CAGrBS,eACE,MAAMC,EAAUnB,KAAKoB,GAAGC,iBAAiB,UACzCF,EAAQG,SAAQC,IACdA,EAAOC,SAAWD,EAAOjB,QAAUN,KAAKO,UAAU,G,CAItDkB,sBACEzB,KAAKkB,c,CAGPQ,SACE,MAAMC,SAAEA,EAAQC,KAAEA,EAAI3B,GAAEA,EAAE4B,MAAEA,GAAU7B,KACtC,MAAM8B,EAAgBH,EAAW,WAAa,GAC9C,OACEI,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAO,oBAAoBH,KAC9BC,EAAA,mBAAiBJ,SAAU3B,KAAK2B,SAAUO,IAAKjC,GAC5C4B,GAEFD,EAAOG,EAAA,kBAAgBJ,SAAU3B,KAAK2B,UAAWC,GAAyB,KAC3EG,EAAA,OAAKE,MAAM,iBAAiBE,MAAOnC,KAAKoC,MAAQ,CAAEC,SAAU,GAAGrC,KAAKoC,WAAc,IAChFL,EAAA,UACEO,IAAKzB,GAAWb,KAAKK,YAAcQ,EACnCZ,GAAIA,EACJgC,MAAO,CAAE,yBAA0B,KAAMM,QAAWvC,KAAKuC,QAASZ,SAAYA,GAAU,gBACzEA,EAAW,OAAS,QAAO,aAC9BE,EACZW,SAAU5B,GAASZ,KAAKW,aAAaC,GACrC6B,OAAQ7B,GAASZ,KAAKe,WAAWH,GACjCe,SAAUA,GAEVI,EAAA,cAEFA,EAAA,kBAAgBE,MAAO,oBAAoBH,IAAe,YAAY,gBAExEC,EAAA,2BAAyBI,MAAO,CAAEO,WAAY1C,KAAKuC,SAAWvC,KAAK2C,eAAiB,UAAY,WAAa3C,KAAK2C,iB,gFAO5H,IAAIzC,EAAS,E"}

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

@@ -18,9 +18,9 @@ const HintComponent = class {
 };
 HintComponent.style = hintCss;
 
-const inputErrorCss = ".sc-admiralty-input-error-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-error{color:#e20d0d}p.sc-admiralty-input-error{margin:0;color:#e20d0d}";
+const inputInvalidCss = ".sc-admiralty-input-invalid-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-invalid{color:#e20d0d}p.sc-admiralty-input-invalid{margin:0;color:#e20d0d}";
 
-const InputError = class {
+const InputInvalidComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
@@ -28,7 +28,7 @@ const InputError = class {
     return (index.h(index.Host, null, index.h("admiralty-icon", { "icon-name": index$1.faExclamation.iconName, class: "error-icon" }), index.h("p", null, index.h("slot", null))));
   }
 };
-InputError.style = inputErrorCss;
+InputInvalidComponent.style = inputInvalidCss;
 
 const labelCss = "label.sc-admiralty-label{margin-bottom:6px;display:inline-block;font-weight:normal}label.disabled.sc-admiralty-label{color:#adadad}";
 
@@ -45,7 +45,7 @@ const LabelComponent = class {
 LabelComponent.style = labelCss;
 
 exports.admiralty_hint = HintComponent;
-exports.admiralty_input_error = InputError;
+exports.admiralty_input_invalid = InputInvalidComponent;
 exports.admiralty_label = LabelComponent;
 
 //# sourceMappingURL=admiralty-hint_3.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"admiralty-hint.admiralty-input-error.admiralty-label.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,8HAA8H;;MCWjI,aAAa;;;;;EAMxB,MAAM;IACJ,QACEA,eAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnCA,qBAAa,CACX,EACJ;GACH;;;;ACvBH,MAAM,aAAa,GAAG,sKAAsK;;MCY/K,UAAU;;;;EACrB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,yCAA2BE,qBAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvFF,mBACEA,qBAAa,CACX,CACC,EACP;GACH;;;;ACtBH,MAAM,QAAQ,GAAG,qIAAqI;;MCWzI,cAAc;;;;;;EAWzB,MAAM;IACJ,QACEA,mBAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1DA,qBAAa,CACP,EACR;GACH;;;;;;;;","names":["h","Host","faExclamation"],"sources":["./src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","./src/components/hint/hint.tsx","./src/components/input-error/input-error.scss?tag=admiralty-input-error&encapsulation=scoped","./src/components/input-error/input-error.tsx","./src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","./src/components/label/label.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: typography.$font-weight-light;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@use '../../scss/vars/colours';\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: colours.$colour-utility-error;\n}\n\np {\n  margin: 0;\n  color: colours.$colour-utility-error;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-error>This field is required</admiralty-input-error>`\n */\n@Component({\n  tag: 'admiralty-input-error',\n  styleUrl: 'input-error.scss',\n  scoped: true,\n})\nexport class InputError {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: typography.$font-weight-medium;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-hint.admiralty-input-invalid.admiralty-label.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,8HAA8H;;MCWjI,aAAa;;;;;EAMxB,MAAM;IACJ,QACEA,eAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnCA,qBAAa,CACX,EACJ;GACH;;;;ACvBH,MAAM,eAAe,GAAG,4KAA4K;;MCYvL,qBAAqB;;;;EAChC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,yCAA2BE,qBAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvFF,mBACEA,qBAAa,CACX,CACC,EACP;GACH;;;;ACtBH,MAAM,QAAQ,GAAG,qIAAqI;;MCWzI,cAAc;;;;;;EAWzB,MAAM;IACJ,QACEA,mBAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1DA,qBAAa,CACP,EACR;GACH;;;;;;;;","names":["h","Host","faExclamation"],"sources":["./src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","./src/components/hint/hint.tsx","./src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","./src/components/input-invalid/input-invalid.tsx","./src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","./src/components/label/label.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: typography.$font-weight-light;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@use '../../scss/vars/colours';\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: colours.$colour-utility-error;\n}\n\np {\n  margin: 0;\n  color: colours.$colour-utility-error;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: typography.$font-weight-medium;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b824133.js');
 
-const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";
+const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:6px}";
 
 const InputComponent = class {
   constructor(hostRef) {
@@ -49,7 +49,7 @@ const InputComponent = class {
     const value = this.getValue();
     return (index.h("div", { class: "text-input-container" }, this.label ? (index.h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
         maxWidth: this.width ? `${this.width}px` : null,
-      } }), index.h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+      } }), index.h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   static get watchers() { return {
     "value": ["valueChanged"]

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

@@ -1 +1 @@
-{"file":"admiralty-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACTA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,mBACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACFA,mCAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\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    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-error {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\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 label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: 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  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,+4BAA+4B;;MCen5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACTA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,mBACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACFA,qCAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\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    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-invalid {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\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 label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: 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  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}

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

@@ -66,7 +66,7 @@ const RadioGroupComponent = class {
   }
   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), index.h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
+    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-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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;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}
+{"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,qCAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,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-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b824133.js');
 
-const selectCss = ".disabled.sc-admiralty-select{color:#adadad}.select-wrapper.sc-admiralty-select{position:relative}admiralty-icon.sc-admiralty-select{font-size:24px;font-weight:normal;pointer-events:none;position:absolute;right:12px;top:12px}select.sc-admiralty-select{appearance:none;background-color:#ffffff;border:2px solid #333333;box-sizing:border-box;color:#333333;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;margin-bottom:6px;position:relative;font-weight:300;padding:12px;width:100%}select.error.sc-admiralty-select{border-color:#e20d0d}select.sc-admiralty-select:focus-visible{outline:3px solid #ffdd00;box-shadow:inset 0 0 0 2px #333333}select.disabled.sc-admiralty-select{border-color:#adadad}";
+const selectCss = ".disabled.sc-admiralty-select{color:#adadad}.select-wrapper.sc-admiralty-select{position:relative}admiralty-icon.sc-admiralty-select{font-size:24px;font-weight:normal;pointer-events:none;position:absolute;right:12px;top:12px}select.sc-admiralty-select{appearance:none;background-color:#ffffff;border:2px solid #333333;box-sizing:border-box;color:#333333;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;margin-bottom:6px;position:relative;font-weight:300;padding:12px;width:100%}select.invalid.sc-admiralty-select{border-color:#e20d0d}select.sc-admiralty-select:focus-visible{outline:3px solid #ffdd00;box-shadow:inset 0 0 0 2px #333333}select.disabled.sc-admiralty-select{border-color:#adadad}";
 
 const SelectComponent = class {
   constructor(hostRef) {
@@ -13,8 +13,8 @@ const SelectComponent = class {
     this.admiraltyBlur = index.createEvent(this, "admiraltyBlur", 7);
     this.id = `admiralty-select-${++nextId}`;
     this.disabled = false;
-    this.error = false;
-    this.errorHint = null;
+    this.invalid = false;
+    this.invalidMessage = null;
     this.hint = null;
     this.label = 'Choose a colour';
     this.width = undefined;
@@ -50,9 +50,9 @@ const SelectComponent = class {
     this.selectOption();
   }
   render() {
-    const { disabled, error, errorHint, hint, id, label } = this;
+    const { disabled, hint, id, label } = this;
     const disabledClass = disabled ? 'disabled' : '';
-    return (index.h(index.Host, null, index.h("div", { class: `admiralty-select ${disabledClass}` }, index.h("admiralty-label", { disabled: this.disabled, for: id }, label), hint ? index.h("admiralty-hint", { disabled: this.disabled }, hint) : null, index.h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, index.h("select", { ref: select => (this.nativeInput = select), id: id, class: { 'admiralty-form-control': true, 'error': error, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled }, index.h("slot", null)), index.h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), this.error ? index.h("admiralty-input-error", null, errorHint) : '')));
+    return (index.h(index.Host, null, index.h("div", { class: `admiralty-select ${disabledClass}` }, index.h("admiralty-label", { disabled: this.disabled, for: id }, label), hint ? index.h("admiralty-hint", { disabled: this.disabled }, hint) : null, index.h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, index.h("select", { ref: select => (this.nativeInput = select), id: id, class: { 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled }, index.h("slot", null)), index.h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), index.h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"admiralty-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,wtBAAwtB;;MCQ7tB,eAAe;;;;;IAG1B,OAAE,GAAW,oBAAoB,EAAE,MAAM,EAAE,CAAC;oBAIhB,KAAK;iBAIR,KAAK;qBAIF,IAAI;gBAIT,IAAI;iBAIH,iBAAiB;;iBAiBiB,EAAE;;EAGlD,YAAY;IACpB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,KAAK,KAAK,EAAE;MAChD,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EAEO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,YAAY,CAAC,KAAY;IACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;IACxD,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;KACjC;GACF;EAED,UAAU,CAAC,MAAkB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,YAAY;IACV,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnD,OAAO,CAAC,OAAO,CAAC,MAAM;MACpB,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;KACpD,CAAC,CAAC;GACJ;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC7D,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;IACjD,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE,IAC7CA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,IAC9C,KAAK,CACU,EACjB,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAkB,GAAG,IAAI,EAC/EA,iBAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,IAClFA,oBACE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,EAC1C,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAChE,QAAQ,GAAG,MAAM,GAAG,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAElBA,qBAAa,CACN,EACTA,4BAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG,EACL,IAAI,CAAC,KAAK,GAAGA,uCAAwB,SAAS,CAAyB,GAAG,EAAE,CACzE,CACD,EACP;GACH;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\n.disabled {\n  color: colours.$colour-textinput-text-disabled;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\nadmiralty-icon {\n  font-size: 24px;\n  font-weight: typography.$font-weight-medium;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\n\nselect {\n  appearance: none;\n  background-color: colours.$colour-white;\n  border: 2px solid colours.$colour-text;\n  box-sizing: border-box;\n  color: colours.$colour-text;\n  font-family: typography.$font-family;\n  font-size: typography.$font-size-normal;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: typography.$font-weight-light;\n  padding: 12px;\n  width: 100%;\n\n  &.error {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &:focus-visible {\n    outline: 3px solid colours.$colour-utility-focus;\n    box-shadow: inset 0 0 0 2px colours.$colour-text;\n  }\n\n  &.disabled {\n    border-color: colours.$colour-textinput-text-disabled;\n  }\n}\n\n\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private nativeInput?: HTMLSelectElement;\n  id: string = `admiralty-select-${++nextId}`;\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * If 'true', the 'error' class is added to suggest an error\n   */\n  @Prop() error: boolean = false;\n  /**\n   * The hint that is used to inform the user of an error (displayed below the select box)\n   */\n  @Prop() errorHint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, error, errorHint, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={id}>\n            {label}\n          </admiralty-label>\n          {hint ? <admiralty-hint disabled={this.disabled}>{hint}</admiralty-hint> : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={id}\n              class={{ 'admiralty-form-control': true, 'error': error, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          {this.error ? <admiralty-input-error>{errorHint}</admiralty-input-error> : ''}\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,0tBAA0tB;;MCQ/tB,eAAe;;;;;IAG1B,OAAE,GAAW,oBAAoB,EAAE,MAAM,EAAE,CAAC;oBAIhB,KAAK;mBAIN,KAAK;0BAIC,IAAI;gBAId,IAAI;iBAIH,iBAAiB;;iBAiBiB,EAAE;;EAGlD,YAAY;IACpB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,KAAK,KAAK,EAAE;MAChD,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EAEO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,YAAY,CAAC,KAAY;IACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;IACxD,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;KACjC;GACF;EAED,UAAU,CAAC,MAAkB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,YAAY;IACV,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnD,OAAO,CAAC,OAAO,CAAC,MAAM;MACpB,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;KACpD,CAAC,CAAC;GACJ;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC3C,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;IACjD,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE,IAC7CA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,IAC9C,KAAK,CACU,EACjB,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAkB,GAAG,IAAI,EAC/EA,iBAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,IAClFA,oBACE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,EAC1C,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,mBACzE,QAAQ,GAAG,MAAM,GAAG,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAElBA,qBAAa,CACN,EACTA,4BAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG,EACNA,qCAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,CACD,EACP;GACH;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.disabled {\n  color: colours.$colour-textinput-text-disabled;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\nadmiralty-icon {\n  font-size: 24px;\n  font-weight: typography.$font-weight-medium;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\nselect {\n  appearance: none;\n  background-color: colours.$colour-white;\n  border: 2px solid colours.$colour-text;\n  box-sizing: border-box;\n  color: colours.$colour-text;\n  font-family: typography.$font-family;\n  font-size: typography.$font-size-normal;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: typography.$font-weight-light;\n  padding: 12px;\n  width: 100%;\n\n  &.invalid {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &:focus-visible {\n    outline: 3px solid colours.$colour-utility-focus;\n    box-shadow: inset 0 0 0 2px colours.$colour-text;\n  }\n\n  &.disabled {\n    border-color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private nativeInput?: HTMLSelectElement;\n  id: string = `admiralty-select-${++nextId}`;\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={id}>\n            {label}\n          </admiralty-label>\n          {hint ? <admiralty-hint disabled={this.disabled}>{hint}</admiralty-hint> : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={id}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n            >\n              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

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

@@ -47,7 +47,7 @@ const TextareaComponent = class {
   }
   render() {
     const value = this.getValue();
-    return (index.h(index.Host, null, index.h("div", { class: "text-area-container" }, this.label ? (index.h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), this.invalid && this.invalidMessage ? index.h("admiralty-input-error", null, this.invalidMessage) : null)));
+    return (index.h(index.Host, null, index.h("div", { class: "text-area-container" }, this.label ? (index.h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), index.h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   static get watchers() { return {
     "value": ["valueChanged"]

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

@@ -1 +1 @@
-{"file":"admiralty-textarea.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2/IAA2/I;;ACG/gJ,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,iBAAiB;;;;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAqEhD,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;iBAvEsB,EAAE;;;;oBAoBE,KAAK;mBAKN,KAAK;;iBAsB0B,EAAE;;;;;EAMlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EAaO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,IACTA,6BAAiB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,sBACE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,EACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,EACxD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,EACX,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAGA,uCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CAC9G,CACD,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/base/responsive\";\n@use \"../../scss/base/typography\";\n@use \"../../scss/vars/typography\" as typography-vars;\n\n\n.text-area-container {\n  textarea {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-height: 170px;\n    border: 2px solid colours.$colour-text;\n    color: colours.$colour-text;\n    padding: 12px 18px;\n    outline: none;\n    resize: vertical;\n    overflow: auto;\n    box-sizing: border-box;\n    vertical-align: top;\n\n    background-color: colours.$colour-white;\n\n    &:focus-visible {\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\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    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { TextAreaChangeEventDetail } from './textarea.interface';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  private nativeTextArea?: HTMLTextAreaElement;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: 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  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event admiraltyChange\n   */\n  @Event() admiraltyInput: EventEmitter<TextAreaChangeEventDetail>;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeTextArea;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            ref={textArea => (this.nativeTextArea = textArea)}\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            value={value}\n            maxLength={this.maxLength}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n          ></textarea>\n          {this.invalid && this.invalidMessage ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-textarea.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2/IAA2/I;;ACG/gJ,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,iBAAiB;;;;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAqEhD,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;iBAvEsB,EAAE;;;;oBAoBE,KAAK;mBAKN,KAAK;;iBAsB0B,EAAE;;;;;EAMlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EAaO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,IACTA,6BAAiB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,sBACE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,EACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,EACxD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,EACZA,qCAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,CACD,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/base/responsive\";\n@use \"../../scss/base/typography\";\n@use \"../../scss/vars/typography\" as typography-vars;\n\n\n.text-area-container {\n  textarea {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-height: 170px;\n    border: 2px solid colours.$colour-text;\n    color: colours.$colour-text;\n    padding: 12px 18px;\n    outline: none;\n    resize: vertical;\n    overflow: auto;\n    box-sizing: border-box;\n    vertical-align: top;\n\n    background-color: colours.$colour-white;\n\n    &:focus-visible {\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\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    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { TextAreaChangeEventDetail } from './textarea.interface';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  private nativeTextArea?: HTMLTextAreaElement;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: 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  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event admiraltyChange\n   */\n  @Event() admiraltyInput: EventEmitter<TextAreaChangeEventDetail>;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeTextArea;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            ref={textArea => (this.nativeTextArea = textArea)}\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            value={value}\n            maxLength={this.maxLength}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n          ></textarea>\n          <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}