@ukho/admiralty-core 0.4.0 → 0.4.1

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

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

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

package/dist/admiralty/{p-6ff37839.entry.js → p-88ef5eaa.entry.js}

@@ -1,2 +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-error.sc-admiralty-input{margin-top:6px}";const e=class{constructor(s){t(this,s);this.admiraltyChange=i(this,"admiraltyChange",7);this.inputId=`admiralty-input-${++a}`;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.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.admiraltyChange.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,onInput:this.onInput,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null}}),s("admiralty-input-error",{style:{visibility:this.invalid?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let a=0;e.style=n;export{e as admiralty_input};
-//# sourceMappingURL=p-6ff37839.entry.js.map
+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-error.sc-admiralty-input{margin-top:6px}";const e=class{constructor(s){t(this,s);this.admiraltyChange=i(this,"admiraltyChange",7);this.inputId=`admiralty-input-${++a}`;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.admiraltyChange.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-error",{style:{visibility:this.invalid?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let a=0;e.style=n;export{e as admiralty_input};
+//# sourceMappingURL=p-88ef5eaa.entry.js.map

package/dist/admiralty/p-88ef5eaa.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyChange","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-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() admiraltyChange: 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.admiraltyChange.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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,84B,MCeJC,EAAc,M,0EACzBC,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,gBAAgBC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU/EH,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,yBAAuBgB,MAAO,CAAEG,WAAYlC,KAAKsB,QAAU,UAAY,WAAatB,KAAKmC,gB,wDAKjG,IAAIjC,EAAS,E"}

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

@@ -24,6 +24,7 @@ const InputComponent = class {
     this.type = 'text';
     this.placeholder = undefined;
     this.width = undefined;
+    this.maxLength = undefined;
     this.required = false;
     this.invalid = false;
     this.invalidMessage = undefined;
@@ -46,7 +47,7 @@ const InputComponent = class {
   }
   render() {
     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, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
+    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 ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }

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;IAkFxC,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;gBAhFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;oBAe1D,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,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;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,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,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,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   * 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() admiraltyChange: 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.admiraltyChange.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          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 ? '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,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,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;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,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,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() admiraltyChange: 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.admiraltyChange.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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/cjs/admiralty.cjs.js

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

package/dist/cjs/loader.cjs.js

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

package/dist/collection/components/input/input.js

@@ -21,6 +21,7 @@ export class InputComponent {
     this.type = 'text';
     this.placeholder = undefined;
     this.width = undefined;
+    this.maxLength = undefined;
     this.required = false;
     this.invalid = false;
     this.invalidMessage = undefined;
@@ -43,7 +44,7 @@ export class InputComponent {
   }
   render() {
     const value = this.getValue();
-    return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, 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, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
+    return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, 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,
       } }), h("admiralty-input-error", { style: { visibility: this.invalid ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
@@ -183,6 +184,23 @@ export class InputComponent {
         "attribute": "width",
         "reflect": false
       },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum string length for the input field."
+        },
+        "attribute": "max-length",
+        "reflect": false
+      },
       "required": {
         "type": "boolean",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnG;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAkFxC,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;IACH,CAAC,CAAC;gBAhFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;oBAe1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;EAO5D;;KAEG;EAEO,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,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACrG,CAAC;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EAChG,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB;MAC9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;MACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;MACzF,aACE,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,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,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;UACL,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI;SAChD,GACD;MACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AACD,IAAI,MAAM,GAAG,CAAC,CAAC","sourcesContent":["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   * 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() admiraltyChange: 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.admiraltyChange.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          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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnG;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;IACH,CAAC,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;EAO5D;;KAEG;EAEO,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,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACrG,CAAC;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EAChG,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB;MAC9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;MACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;MACzF,aACE,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,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;UACL,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI;SAChD,GACD;MACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AACD,IAAI,MAAM,GAAG,CAAC,CAAC","sourcesContent":["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() admiraltyChange: 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.admiraltyChange.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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"]}

package/dist/collection/components/input/input.spec.js

@@ -87,4 +87,18 @@ describe('admiralty-input', () => {
     `);
   });
 });
+it('renders with maxlength', async () => {
+  const page = await newSpecPage({
+    components: [InputComponent],
+    html: `<admiralty-input max-length="1"></admiralty-input>`,
+  });
+  expect(page.root).toEqualHtml(`
+    <admiralty-input max-length="1">
+      <div class="text-input-container">
+        <input autocomplete="off" class="" id="admiralty-input-7" maxlength="1" name="admiralty-input-7" type="text" value="">
+        <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+      </div>
+    </admiralty-input>
+  `);
+});
 //# sourceMappingURL=input.spec.js.map

package/dist/collection/components/input/input.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.spec.js","sourceRoot":"","sources":["../../../src/components/input/input.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,wDAAwD;KAC/D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,sFAAsF;KAC7F,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { InputComponent } from './input';\n\ndescribe('admiralty-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input>\n        <div class=\"text-input-container\">\n          <input autocomplete=\"off\" id=\"admiralty-input-1\" name=\"admiralty-input-1\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders with a label', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input label=\"test-label\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input label=\"test-label\">\n        <div class=\"text-input-container\">\n          <admiralty-label for=\"admiralty-input-2\">test-label</admiralty-label>\n          <input autocomplete=\"off\" id=\"admiralty-input-2\" name=\"admiralty-input-2\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders disabled', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input disabled></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input disabled>\n        <div class=\"text-input-container\">\n          <input disabled autocomplete=\"off\" class=\"disabled\" id=\"admiralty-input-3\" name=\"admiralty-input-3\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders invalid even without invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input invalid=\"true\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input invalid=\"true\">\n        <div class=\"text-input-container\">\n          <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-4\" name=\"admiralty-input-4\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: visible;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders invalid with invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input invalid=\"true\" invalidMessage=\"This is invalid!\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input invalid=\"true\" invalidMessage=\"This is invalid!\">\n        <div class=\"text-input-container\">\n          <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-5\" name=\"admiralty-input-5\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: visible;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders with type', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input type=\"date\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input type=\"date\">\n        <div class=\"text-input-container\">\n          <input type=\"date\" autocomplete=\"off\" id=\"admiralty-input-6\" name=\"admiralty-input-6\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"input.spec.js","sourceRoot":"","sources":["../../../src/components/input/input.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,wDAAwD;KAC/D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,sFAAsF;KAC7F,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;EACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;IAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;IAC5B,IAAI,EAAE,oDAAoD;GAC3D,CAAC,CAAC;EACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;GAO7B,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { InputComponent } from './input';\n\ndescribe('admiralty-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input>\n        <div class=\"text-input-container\">\n          <input autocomplete=\"off\" id=\"admiralty-input-1\" name=\"admiralty-input-1\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders with a label', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input label=\"test-label\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input label=\"test-label\">\n        <div class=\"text-input-container\">\n          <admiralty-label for=\"admiralty-input-2\">test-label</admiralty-label>\n          <input autocomplete=\"off\" id=\"admiralty-input-2\" name=\"admiralty-input-2\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders disabled', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input disabled></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input disabled>\n        <div class=\"text-input-container\">\n          <input disabled autocomplete=\"off\" class=\"disabled\" id=\"admiralty-input-3\" name=\"admiralty-input-3\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders invalid even without invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input invalid=\"true\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input invalid=\"true\">\n        <div class=\"text-input-container\">\n          <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-4\" name=\"admiralty-input-4\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: visible;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders invalid with invalidMessage', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input invalid=\"true\" invalidMessage=\"This is invalid!\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input invalid=\"true\" invalidMessage=\"This is invalid!\">\n        <div class=\"text-input-container\">\n          <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-5\" name=\"admiralty-input-5\" type=\"text\" value=\"\">\n          <admiralty-input-error style=\"visibility: visible;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n\n  it('renders with type', async () => {\n    const page = await newSpecPage({\n      components: [InputComponent],\n      html: `<admiralty-input type=\"date\"></admiralty-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <admiralty-input type=\"date\">\n        <div class=\"text-input-container\">\n          <input type=\"date\" autocomplete=\"off\" id=\"admiralty-input-6\" name=\"admiralty-input-6\" value=\"\">\n          <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n        </div>\n      </admiralty-input>\n    `);\n  });\n});\n\nit('renders with maxlength', async () => {\n  const page = await newSpecPage({\n    components: [InputComponent],\n    html: `<admiralty-input max-length=\"1\"></admiralty-input>`,\n  });\n  expect(page.root).toEqualHtml(`\n    <admiralty-input max-length=\"1\">\n      <div class=\"text-input-container\">\n        <input autocomplete=\"off\" class=\"\" id=\"admiralty-input-7\" maxlength=\"1\" name=\"admiralty-input-7\" type=\"text\" value=\"\">\n        <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n      </div>\n    </admiralty-input>\n  `);\n});\n"]}

package/dist/components/input.js

@@ -25,6 +25,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
     this.type = 'text';
     this.placeholder = undefined;
     this.width = undefined;
+    this.maxLength = undefined;
     this.required = false;
     this.invalid = false;
     this.invalidMessage = undefined;
@@ -47,7 +48,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
   }
   render() {
     const value = this.getValue();
-    return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, 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, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
+    return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, 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,
       } }), h("admiralty-input-error", { style: { visibility: this.invalid ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
@@ -63,6 +64,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
     "type": [1],
     "placeholder": [1],
     "width": [2],
+    "maxLength": [2, "max-length"],
     "required": [4],
     "invalid": [4],
     "invalidMessage": [1, "invalid-message"],

package/dist/components/input.js.map

@@ -1 +1 @@
-{"file":"input.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAkFxC,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;gBAhFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;oBAe1D,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,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;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,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,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,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,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,EACN;GACH;;;;;;;;;;;;;;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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   * 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() admiraltyChange: 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.admiraltyChange.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          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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}
+{"file":"input.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,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;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,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,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,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,EACN;GACH;;;;;;;;;;;;;;;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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() admiraltyChange: 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.admiraltyChange.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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}

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

@@ -20,6 +20,7 @@ const InputComponent = class {
     this.type = 'text';
     this.placeholder = undefined;
     this.width = undefined;
+    this.maxLength = undefined;
     this.required = false;
     this.invalid = false;
     this.invalidMessage = undefined;
@@ -42,7 +43,7 @@ const InputComponent = class {
   }
   render() {
     const value = this.getValue();
-    return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, 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, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
+    return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, 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,
       } }), h("admiralty-input-error", { style: { visibility: this.invalid ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }

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

@@ -1 +1 @@
-{"file":"admiralty-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAkFxC,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;gBAhFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;oBAe1D,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,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;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,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,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,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,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"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   * 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() admiraltyChange: 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.admiraltyChange.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          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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-input.entry.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,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;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,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,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,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CAC5H,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"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() admiraltyChange: 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.admiraltyChange.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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/esm/admiralty.js

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

package/dist/esm/loader.js

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

package/dist/types/components/input/input.d.ts

@@ -37,6 +37,10 @@ export declare class InputComponent implements ComponentInterface {
    * The maximum width for the input field.
    */
   width: number;
+  /**
+   * The maximum string length for the input field.
+   */
+  maxLength?: number;
   /**
    * This dictates whether the input is required or not
    */

package/dist/types/components.d.ts

@@ -278,6 +278,10 @@ export namespace Components {
           * The label which will be used above the input to describe the input.
          */
         "label": string;
+        /**
+          * The maximum string length for the input field.
+         */
+        "maxLength"?: number;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -1288,6 +1292,10 @@ declare namespace LocalJSX {
           * The label which will be used above the input to describe the input.
          */
         "label"?: string;
+        /**
+          * The maximum string length for the input field.
+         */
+        "maxLength"?: number;
         /**
           * The name of the control, which is submitted with the form data.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -26,9 +26,9 @@
     "test:e2e": "stencil test --e2e",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "storybook": "concurrently \"stencil build --watch\" \"cross-env BROWSER=none storybook dev -p 6006\"",
+    "storybook": "concurrently \"stencil build --watch\" \"storybook dev --no-open -p 6006\"",
     "storybook-nb": "npx storybook dev -p 6006",
-    "storybook-dev": "concurrently \"stencil build --debug --dev --watch\" \"cross-env BROWSER=none npx storybook dev -p 6006\"",
+    "storybook-dev": "concurrently \"stencil build --debug --dev --watch\" \"npx storybook dev --no-open -p 6006\"",
     "build-storybook": "storybook build",
     "story": "yarn start & yarn storybook"
   },
@@ -43,17 +43,16 @@
     "@stencil/angular-output-target": "^0.7.1",
     "@stencil/core": "^3.4.2",
     "@stencil/sass": "^3.0.5",
-    "@storybook/addon-a11y": "~7.0.23",
-    "@storybook/addon-actions": "~7.0.23",
-    "@storybook/addon-essentials": "~7.0.23",
-    "@storybook/addon-links": "~7.0.23",
-    "@storybook/web-components": "~7.0.23",
-    "@storybook/web-components-vite": "~7.0.23",
+    "@storybook/addon-a11y": "^7.2.3",
+    "@storybook/addon-actions": "^7.2.3",
+    "@storybook/addon-essentials": "^7.2.3",
+    "@storybook/addon-links": "^7.2.3",
+    "@storybook/web-components": "^7.2.3",
+    "@storybook/web-components-vite": "^7.2.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^18.17.0",
     "clean-css-cli": "^5.6.2",
     "concurrently": "^8.2.0",
-    "cross-env": "^7.0.3",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "jest-environment-node": "^27.5.1",
@@ -62,11 +61,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.64.1",
-    "storybook": "~7.0.23",
+    "storybook": "^7.2.3",
     "vite": "^4.4.7"
   },
   "license": "MIT",
   "url": "https://github.com/UKHO/admiralty-design-system",
   "repository": "git://github.com/UKHO/admiralty-design-system.git",
-  "gitHead": "9e83214b980f033cbd0d99eb094b0718fe16dbc0"
+  "gitHead": "a282733a2c707e071f7b885c51be2843db6dab73"
 }

package/dist/admiralty/p-6ff37839.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyChange","emit","toString","render","h","class","label","disabled","for","hint","ref","invalid","id","name","type","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-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   * 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() admiraltyChange: 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.admiraltyChange.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          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 ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,84B,MCeJC,EAAc,M,0EACzBC,KAAAC,QAAkB,qBAAqBC,IAkF/BF,KAAAG,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,aA9ETP,KAAKC,Q,uDAeT,M,UAK6D,O,8DAepD,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,gBAAgBC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU/EH,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,EACPJ,QAASH,KAAKG,QACduB,YAAa1B,KAAK0B,YAClBC,aAAc3B,KAAK4B,aACnBC,SAAU7B,KAAK6B,SACfC,MAAO,CACLC,SAAU/B,KAAKgC,MAAQ,GAAGhC,KAAKgC,UAAY,QAG/CjB,EAAA,yBAAuBe,MAAO,CAAEG,WAAYjC,KAAKsB,QAAU,UAAY,WAAatB,KAAKkC,gB,wDAKjG,IAAIhC,EAAS,E"}