@ukho/admiralty-core 0.3.2 → 0.3.3

package/dist/admiralty/admiralty.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-8225cd30.js";export{s as setNonce}from"./p-8225cd30.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-09e7df9b",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-41aa3d54",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-26a07388",[[2,"admiralty-textarea",{label:[1],text:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"]}]]],["p-18d8edba",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-04d983b1",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-8e1c544e",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-25137236",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-6a67787d",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-427931d8",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-a83c53d6",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-e14d755c",[[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-13337000",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-b2f9c733",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-33f2277f",[[6,"admiralty-breadcrumbs"]]],["p-73f1e9af",[[6,"admiralty-card",{heading:[1]}]]],["p-d714d96d",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-03984927",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-41872b2c",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-5c8e168b",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],displaySubmenu:[32]}]]],["p-6bd89e36",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-aa056a9d",[[2,"admiralty-hr"]]],["p-372a7b5d",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-4fd3d786",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-45d70b06",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-8a83fdc2",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-70bf6a66",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"]}]]],["p-62b6c19e",[[6,"admiralty-side-nav",{label:[1]}]]],["p-fd2e811e",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-b82a1318",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-1ff4dbf7",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-24ae9a66",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-644da64d",[[6,"admiralty-table",{caption:[1]}]]],["p-6b52f2e4",[[6,"admiralty-table-body"]]],["p-3a802b4b",[[6,"admiralty-table-cell"]]],["p-dc8c7789",[[6,"admiralty-table-header"]]],["p-20b64a58",[[6,"admiralty-table-header-cell"]]],["p-b6634d3d",[[6,"admiralty-table-row"]]],["p-d7ed8189",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-21bb17f3",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-f0d70648",[[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-3ac74056",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-b0f577b7",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-9602a0d0",[[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-8225cd30.js";export{s as setNonce}from"./p-8225cd30.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-09e7df9b",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-41aa3d54",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-58062018",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-18d8edba",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-04d983b1",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-8e1c544e",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-25137236",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-6a67787d",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-427931d8",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-a83c53d6",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-e14d755c",[[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-13337000",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-b2f9c733",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-33f2277f",[[6,"admiralty-breadcrumbs"]]],["p-73f1e9af",[[6,"admiralty-card",{heading:[1]}]]],["p-d714d96d",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-03984927",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-41872b2c",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-5c8e168b",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],displaySubmenu:[32]}]]],["p-6bd89e36",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-aa056a9d",[[2,"admiralty-hr"]]],["p-372a7b5d",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-4fd3d786",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-45d70b06",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-8a83fdc2",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-70bf6a66",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"]}]]],["p-62b6c19e",[[6,"admiralty-side-nav",{label:[1]}]]],["p-fd2e811e",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-b82a1318",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-1ff4dbf7",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-24ae9a66",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-644da64d",[[6,"admiralty-table",{caption:[1]}]]],["p-6b52f2e4",[[6,"admiralty-table-body"]]],["p-3a802b4b",[[6,"admiralty-table-cell"]]],["p-dc8c7789",[[6,"admiralty-table-header"]]],["p-20b64a58",[[6,"admiralty-table-header-cell"]]],["p-b6634d3d",[[6,"admiralty-table-row"]]],["p-d7ed8189",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-21bb17f3",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-f0d70648",[[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-3ac74056",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-b0f577b7",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-9602a0d0",[[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","text","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","menuTitle","isSignedIn","signedInText","displaySubmenu","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.1 | 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,IAAAS,KAAA,IAAAR,KAAA,IAAAO,MAAA,IAAAE,UAAA,iBAAAL,SAAA,IAAAM,QAAA,IAAAC,eAAA,sEAAAJ,MAAA,IAAAK,OAAA,IAAAC,QAAA,IAAAC,OAAA,IAAAC,YAAA,KAAAC,WAAA,4DAAAC,YAAA,mEAAAC,WAAA,+DAAAC,MAAA,IAAAC,YAAA,mBAAArB,MAAA,kDAAAsB,OAAA,IAAAC,MAAA,IAAA7B,KAAA,gDAAA8B,KAAA,IAAAV,QAAA,kDAAAd,MAAA,IAAAyB,SAAA,IAAAC,MAAA,+CAAAC,YAAA,mBAAAC,eAAA,uBAAAC,YAAA,oBAAAC,WAAA,mBAAAC,YAAA,oBAAAC,eAAA,KAAAC,iBAAA,qDAAAjC,MAAA,IAAAkC,YAAA,IAAA5B,MAAA,IAAA6B,iBAAA,kDAAArB,QAAA,IAAAsB,SAAA,0FAAAtB,QAAA,gDAAAuB,cAAA,qBAAAhC,SAAA,IAAAiC,KAAA,IAAAC,QAAA,OAAAxC,MAAA,IAAAyC,UAAA,2DAAAC,UAAA,iBAAAC,SAAA,gBAAAC,SAAA,gBAAAlC,KAAA,wDAAAmC,UAAA,iBAAAtB,OAAA,sDAAAuB,WAAA,mBAAAC,aAAA,qBAAAC,eAAA,6DAAAH,UAAA,6FAAAlD,KAAA,IAAAsD,OAAA,8JAAAC,MAAA,IAAAC,KAAA,6CAAAZ,KAAA,IAAAvC,MAAA,OAAAM,SAAA,IAAAkC,QAAA,OAAAY,eAAA,KAAAC,kBAAA,oDAAAd,KAAA,IAAAvC,MAAA,OAAAsD,gBAAA,mEAAArD,MAAA,qDAAAsD,cAAA,uBAAAC,aAAA,oBAAAC,UAAA,mKAAAxD,MAAA,IAAAyD,WAAA,mBAAAC,aAAA,kEAAAC,cAAA,iEAAAC,QAAA,2RAAA7D,MAAA,4CAAA8D,SAAA,gBAAAC,WAAA,2DAAAxB,KAAA,IAAAtC,MAAA,IAAAC,KAAA,IAAAI,SAAA,IAAAmB,KAAA,IAAAtB,YAAA,IAAAM,MAAA,IAAAuD,SAAA,IAAApD,QAAA,IAAAC,eAAA,sBAAAoD,aAAA,IAAAjE,MAAA,oDAAAe,QAAA,IAAAsB,SAAA,OAAA6B,kBAAA,0BAAAC,WAAA,4DAAAC,QAAA,IAAAC,KAAA,IAAA/D,SAAA,MAAAmB,KAAA,wEAAAnB,SAAA,4BAAAA,SAAA,IAAAgE,IAAA,SAAAxE"}
+{"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","displaySubmenu","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.1 | 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,qBAAAC,eAAA,6DAAAH,UAAA,6FAAAlD,KAAA,IAAAsD,OAAA,8JAAAC,MAAA,IAAAC,KAAA,6CAAAb,KAAA,IAAAtC,MAAA,OAAAM,SAAA,IAAAiC,QAAA,OAAAa,eAAA,KAAAC,kBAAA,oDAAAf,KAAA,IAAAtC,MAAA,OAAAsD,gBAAA,mEAAArD,MAAA,qDAAAsD,cAAA,uBAAAC,aAAA,oBAAAC,UAAA,mKAAAxD,MAAA,IAAAyD,WAAA,mBAAAC,aAAA,kEAAAC,cAAA,iEAAAC,QAAA,2RAAA7D,MAAA,4CAAA8D,SAAA,gBAAAC,WAAA,2DAAAzB,KAAA,IAAArC,MAAA,IAAAC,KAAA,IAAAI,SAAA,IAAAkB,KAAA,IAAArB,YAAA,IAAAM,MAAA,IAAAuD,SAAA,IAAArD,QAAA,IAAAC,eAAA,sBAAAqD,aAAA,IAAAjE,MAAA,oDAAAc,QAAA,IAAAsB,SAAA,OAAA8B,kBAAA,0BAAAC,WAAA,4DAAAC,QAAA,IAAAC,KAAA,IAAA/D,SAAA,MAAAkB,KAAA,wEAAAlB,SAAA,4BAAAA,SAAA,IAAAgE,IAAA,SAAAxE"}

package/dist/admiralty/{p-26a07388.entry.js → p-58062018.entry.js}

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

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

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

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

@@ -11,26 +11,47 @@ const TextareaComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.textareaBlur = index.createEvent(this, "textareaBlur", 7);
-    this.textareaChanged = index.createEvent(this, "textareaChanged", 7);
+    this.admiraltyChange = index.createEvent(this, "admiraltyChange", 7);
     this.inputId = `admiralty-textarea-${textareaIds++}`;
     this.onBlur = () => {
       this.textareaBlur.emit();
     };
-    this.onChange = (_ev) => {
-      this.textareaChanged.emit(this.text);
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
     };
     this.label = '';
-    this.text = '';
     this.hint = undefined;
     this.width = undefined;
     this.maxLength = undefined;
     this.disabled = false;
     this.invalid = false;
     this.invalidMessage = undefined;
+    this.value = '';
+  }
+  /**
+   * Update the native textarea element when the value changes
+   */
+  valueChanged() {
+    const nativeInput = this.nativeTextArea;
+    const value = this.getValue();
+    if (nativeInput && nativeInput.value !== value) {
+      nativeInput.value = value;
+    }
+    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() {
-    return (index.h(index.Host, null, index.h("div", { class: "text-area-container" }, this.label ? (index.h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("textarea", { class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, maxlength: this.maxLength, onChange: this.onChange, onBlur: this.onBlur }, this.text), this.invalid ? index.h("admiralty-input-error", null, this.invalidMessage) : null)));
+    const value = this.getValue();
+    return (index.h(index.Host, null, index.h("div", { class: "text-area-container" }, this.label ? (index.h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), this.invalid ? index.h("admiralty-input-error", null, this.invalidMessage) : null)));
   }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
 };
 TextareaComponent.style = textareaCss;
 

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

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

package/dist/collection/components/textarea/textarea.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=textarea.interface.js.map

package/dist/collection/components/textarea/textarea.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.interface.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TextAreaChangeEventDetail {\n  value: string | undefined | null;\n}\n"]}

package/dist/collection/components/textarea/textarea.js

@@ -6,20 +6,38 @@ export class TextareaComponent {
     this.onBlur = () => {
       this.textareaBlur.emit();
     };
-    this.onChange = (_ev) => {
-      this.textareaChanged.emit(this.text);
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
     };
     this.label = '';
-    this.text = '';
     this.hint = undefined;
     this.width = undefined;
     this.maxLength = undefined;
     this.disabled = false;
     this.invalid = false;
     this.invalidMessage = undefined;
+    this.value = '';
+  }
+  /**
+   * Update the native textarea element when the value changes
+   */
+  valueChanged() {
+    const nativeInput = this.nativeTextArea;
+    const value = this.getValue();
+    if (nativeInput && nativeInput.value !== value) {
+      nativeInput.value = value;
+    }
+    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() {
-    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, maxlength: this.maxLength, onChange: this.onChange, onBlur: this.onBlur }, this.text), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
+    const value = this.getValue();
+    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
   }
   static get is() { return "admiralty-textarea"; }
   static get encapsulation() { return "scoped"; }
@@ -53,24 +71,6 @@ export class TextareaComponent {
         "reflect": false,
         "defaultValue": "''"
       },
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The contents of the textarea"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
       "hint": {
         "type": "string",
         "mutable": false,
@@ -174,6 +174,24 @@ export class TextareaComponent {
         },
         "attribute": "invalid-message",
         "reflect": false
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "string | number | null",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the textarea."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
       }
     };
   }
@@ -197,24 +215,35 @@ export class TextareaComponent {
           "references": {}
         }
       }, {
-        "method": "textareaChanged",
-        "name": "textareaChanged",
+        "method": "admiraltyChange",
+        "name": "admiraltyChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "event",
-              "text": "textareaChanged"
+              "text": "admiraltyChange"
             }],
           "text": "Event is fired when the form control changes"
         },
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "TextAreaChangeEventDetail",
+          "resolved": "TextAreaChangeEventDetail",
+          "references": {
+            "TextAreaChangeEventDetail": {
+              "location": "import",
+              "path": "./textarea.interface"
+            }
+          }
         }
       }];
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
 }
 //# sourceMappingURL=textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E,IAAI,WAAW,GAAG,CAAC,CAAC;AAOpB,MAAM,OAAO,iBAAiB;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAsDhD,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,GAAQ,EAAE,EAAE;MAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,CAAC;iBAvDsB,EAAE;gBAKH,EAAE;;;;oBAoBG,KAAK;mBAKN,KAAK;;;EA0BhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,qBAAqB;QAC7B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;QACzF,gBACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EACxD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,CACD;QACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAwB,IAAI,CAAC,cAAc,CAAyB,CAAC,CAAC,CAAC,IAAI,CACvF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The contents of the textarea\n   */\n  @Prop() text: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event textareaChanged\n   */\n  @Event({ eventName: 'textareaChanged' }) textareaChanged: EventEmitter<string>;\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onChange = (_ev: any) => {\n    this.textareaChanged.emit(this.text);\n  };\n  render() {\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            maxlength={this.maxLength}\n            onChange={this.onChange}\n            onBlur={this.onBlur}\n          >\n            {this.text}\n          </textarea>\n          {this.invalid ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAGrF,IAAI,WAAW,GAAG,CAAC,CAAC;AAOpB,MAAM,OAAO,iBAAiB;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAqEhD,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,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;iBAvEsB,EAAE;;;;oBAoBE,KAAK;mBAKN,KAAK;;iBAsB0B,EAAE;;EAE5D;;KAEG;EAEO,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,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;EAaO,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,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,qBAAqB;QAC7B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;QACzF,gBACE,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,EACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EACxD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT;QACX,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAwB,IAAI,CAAC,cAAc,CAAyB,CAAC,CAAC,CAAC,IAAI,CACvF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { TextAreaChangeEventDetail } from './textarea.interface';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  private nativeTextArea?: HTMLTextAreaElement;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event admiraltyChange\n   */\n  @Event() admiraltyChange: EventEmitter<TextAreaChangeEventDetail>;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeTextArea;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            ref={textArea => (this.nativeTextArea = textArea)}\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            value={value}\n            maxLength={this.maxLength}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n          ></textarea>\n          {this.invalid ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -17,7 +17,7 @@ describe('admiralty-textarea', () => {
           <admiralty-hint>
             Please enter description
           </admiralty-hint>
-          <textarea id="admiralty-textarea-${compId}"></textarea>
+          <textarea id="admiralty-textarea-${compId}" value=""></textarea>
         </div>
       </admiralty-textarea>
     `);
@@ -27,12 +27,12 @@ describe('admiralty-textarea', () => {
     const testText = 'Test Text';
     const page = await newSpecPage({
       components: [TextareaComponent],
-      html: `<admiralty-textarea text="${testText}"></admiralty-textarea>`,
+      html: `<admiralty-textarea value="${testText}"></admiralty-textarea>`,
     });
     expect(page.root).toEqualHtml(`
-      <admiralty-textarea text="${testText}">
+      <admiralty-textarea value="${testText}">
         <div class="text-area-container">
-          <textarea id="admiralty-textarea-${compId}">${testText}</textarea>
+          <textarea id="admiralty-textarea-${compId}" value="${testText}"></textarea>
         </div>
       </admiralty-textarea>
     `);
@@ -47,7 +47,7 @@ describe('admiralty-textarea', () => {
       <admiralty-textarea label="Description" disabled="true">
         <div class="text-area-container">
           <admiralty-label disabled="" for="admiralty-textarea-${compId}">Description</admiralty-label>
-          <textarea class="disabled" id="admiralty-textarea-${compId}"></textarea>
+          <textarea class="disabled" id="admiralty-textarea-${compId}" value=""></textarea>
         </div>
       </admiralty-textarea>
     `);
@@ -62,7 +62,7 @@ describe('admiralty-textarea', () => {
       <admiralty-textarea label="Description" invalid="true" invalidMessage="BAD">
         <div class="text-area-container">
           <admiralty-label for="admiralty-textarea-${compId}">Description</admiralty-label>
-          <textarea class="invalid" id="admiralty-textarea-${compId}"></textarea>
+          <textarea class="invalid" id="admiralty-textarea-${compId}" value=""></textarea>
           <admiralty-input-error></admiralty-input-error>
         </div>
       </admiralty-textarea>

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.spec.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAEhB,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+FAA+F;KACtG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;;;;;;6CAMd,MAAM;;;KAG9C,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,QAAQ,GAAG,WAAW,CAAC;IAE7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,6BAA6B,QAAQ,yBAAyB;KACrE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;kCACA,QAAQ;;6CAEG,MAAM,KAAK,QAAQ;;;KAG3D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+EAA+E;KACtF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;iEAG+B,MAAM;8DACT,MAAM;;;KAG/D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,mGAAmG;KAC1G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;;KAI9D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { TextareaComponent } from './textarea';\n\nlet compId = -1;\n\ndescribe('admiralty-textarea', () => {\n  it('renders', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" hint=\"Please enter description\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" hint=\"Please enter description\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">\n            Description\n          </admiralty-label>\n          <admiralty-hint>\n            Please enter description\n          </admiralty-hint>\n          <textarea id=\"admiralty-textarea-${compId}\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should reflect textarea Text', async () => {\n    ++compId;\n\n    const testText = 'Test Text';\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea text=\"${testText}\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea text=\"${testText}\">\n        <div class=\"text-area-container\">\n          <textarea id=\"admiralty-textarea-${compId}\">${testText}</textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render disabled state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" disabled=\"true\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" disabled=\"true\">\n        <div class=\"text-area-container\">\n          <admiralty-label disabled=\"\" for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"disabled\" id=\"admiralty-textarea-${compId}\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render invalid state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"BAD\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"BAD\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"invalid\" id=\"admiralty-textarea-${compId}\"></textarea>\n          <admiralty-input-error></admiralty-input-error>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"textarea.spec.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAEhB,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+FAA+F;KACtG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;;;;;;6CAMd,MAAM;;;KAG9C,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,QAAQ,GAAG,WAAW,CAAC;IAE7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,8BAA8B,QAAQ,yBAAyB;KACtE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;mCACC,QAAQ;;6CAEE,MAAM,YAAY,QAAQ;;;KAGlE,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+EAA+E;KACtF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;iEAG+B,MAAM;8DACT,MAAM;;;KAG/D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,mGAAmG;KAC1G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;;KAI9D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { TextareaComponent } from './textarea';\n\nlet compId = -1;\n\ndescribe('admiralty-textarea', () => {\n  it('renders', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" hint=\"Please enter description\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" hint=\"Please enter description\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">\n            Description\n          </admiralty-label>\n          <admiralty-hint>\n            Please enter description\n          </admiralty-hint>\n          <textarea id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should reflect textarea Text', async () => {\n    ++compId;\n\n    const testText = 'Test Text';\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea value=\"${testText}\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea value=\"${testText}\">\n        <div class=\"text-area-container\">\n          <textarea id=\"admiralty-textarea-${compId}\" value=\"${testText}\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render disabled state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" disabled=\"true\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" disabled=\"true\">\n        <div class=\"text-area-container\">\n          <admiralty-label disabled=\"\" for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"disabled\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render invalid state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"BAD\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"BAD\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"invalid\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n          <admiralty-input-error></admiralty-input-error>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n});\n"]}

package/dist/components/admiralty-textarea.js

@@ -12,36 +12,57 @@ const TextareaComponent = /*@__PURE__*/ proxyCustomElement(class TextareaCompone
     super();
     this.__registerHost();
     this.textareaBlur = createEvent(this, "textareaBlur", 7);
-    this.textareaChanged = createEvent(this, "textareaChanged", 7);
+    this.admiraltyChange = createEvent(this, "admiraltyChange", 7);
     this.inputId = `admiralty-textarea-${textareaIds++}`;
     this.onBlur = () => {
       this.textareaBlur.emit();
     };
-    this.onChange = (_ev) => {
-      this.textareaChanged.emit(this.text);
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
     };
     this.label = '';
-    this.text = '';
     this.hint = undefined;
     this.width = undefined;
     this.maxLength = undefined;
     this.disabled = false;
     this.invalid = false;
     this.invalidMessage = undefined;
+    this.value = '';
+  }
+  /**
+   * Update the native textarea element when the value changes
+   */
+  valueChanged() {
+    const nativeInput = this.nativeTextArea;
+    const value = this.getValue();
+    if (nativeInput && nativeInput.value !== value) {
+      nativeInput.value = value;
+    }
+    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() {
-    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, maxlength: this.maxLength, onChange: this.onChange, onBlur: this.onBlur }, this.text), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
+    const value = this.getValue();
+    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
   }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
   static get style() { return textareaCss; }
 }, [2, "admiralty-textarea", {
     "label": [1],
-    "text": [1],
     "hint": [1],
     "width": [2],
     "maxLength": [2, "max-length"],
     "disabled": [4],
     "invalid": [4],
-    "invalidMessage": [1, "invalid-message"]
+    "invalidMessage": [1, "invalid-message"],
+    "value": [1032]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/admiralty-textarea.js.map

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

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

@@ -7,26 +7,47 @@ const TextareaComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.textareaBlur = createEvent(this, "textareaBlur", 7);
-    this.textareaChanged = createEvent(this, "textareaChanged", 7);
+    this.admiraltyChange = createEvent(this, "admiraltyChange", 7);
     this.inputId = `admiralty-textarea-${textareaIds++}`;
     this.onBlur = () => {
       this.textareaBlur.emit();
     };
-    this.onChange = (_ev) => {
-      this.textareaChanged.emit(this.text);
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
     };
     this.label = '';
-    this.text = '';
     this.hint = undefined;
     this.width = undefined;
     this.maxLength = undefined;
     this.disabled = false;
     this.invalid = false;
     this.invalidMessage = undefined;
+    this.value = '';
+  }
+  /**
+   * Update the native textarea element when the value changes
+   */
+  valueChanged() {
+    const nativeInput = this.nativeTextArea;
+    const value = this.getValue();
+    if (nativeInput && nativeInput.value !== value) {
+      nativeInput.value = value;
+    }
+    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() {
-    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, maxlength: this.maxLength, onChange: this.onChange, onBlur: this.onBlur }, this.text), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
+    const value = this.getValue();
+    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
   }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
 };
 TextareaComponent.style = textareaCss;
 

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

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

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

@@ -1,14 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { TextAreaChangeEventDetail } from './textarea.interface';
 export declare class TextareaComponent {
   private inputId;
+  private nativeTextArea?;
   /**
    * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.
    */
   label: string;
-  /**
-   * The contents of the textarea
-   */
-  text: string;
   /**
    * The hint which will be used under the label to describe the input.
    */
@@ -40,10 +38,19 @@ export declare class TextareaComponent {
   textareaBlur: EventEmitter<any>;
   /**
    * Event is fired when the form control changes
-   * @event textareaChanged
+   * @event admiraltyChange
+   */
+  admiraltyChange: EventEmitter<TextAreaChangeEventDetail>;
+  /**
+   * The value of the textarea.
+   */
+  value?: string | number | null;
+  /**
+   * Update the native textarea element when the value changes
    */
-  textareaChanged: EventEmitter<string>;
+  protected valueChanged(): void;
   private onBlur;
-  private onChange;
+  private onInput;
+  private getValue;
   render(): any;
 }

package/dist/types/components/textarea/textarea.interface.d.ts

@@ -0,0 +1,3 @@
+export interface TextAreaChangeEventDetail {
+  value: string | undefined | null;
+}

package/dist/types/components.d.ts

@@ -13,6 +13,7 @@ import { IconName as IconName1 } from "@fortawesome/free-solid-svg-icons";
 import { InputChangeEventDetail } from "./components/input/input.interface";
 import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 import { SelectChangeEventDetail } from "./components/select/select.interface";
+import { TextAreaChangeEventDetail } from "./components/textarea/textarea.interface";
 export { ButtonVariant } from "./components/button/button.types";
 export { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox.interface";
@@ -21,6 +22,7 @@ export { IconName as IconName1 } from "@fortawesome/free-solid-svg-icons";
 export { InputChangeEventDetail } from "./components/input/input.interface";
 export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 export { SelectChangeEventDetail } from "./components/select/select.interface";
+export { TextAreaChangeEventDetail } from "./components/textarea/textarea.interface";
 export namespace Components {
     interface AdmiraltyBreadcrumb {
         /**
@@ -528,9 +530,9 @@ export namespace Components {
          */
         "maxLength"?: number;
         /**
-          * The contents of the textarea
+          * The value of the textarea.
          */
-        "text": string;
+        "value"?: string | number | null;
         /**
           * The maximum width for the input field.
          */
@@ -1577,20 +1579,20 @@ declare namespace LocalJSX {
           * The maximum string length for the input field.
          */
         "maxLength"?: number;
+        /**
+          * Event is fired when the form control changes
+          * @event admiraltyChange
+         */
+        "onAdmiraltyChange"?: (event: AdmiraltyTextareaCustomEvent<TextAreaChangeEventDetail>) => void;
         /**
           * Event is fired when the form control loses focus
           * @event textareaBlur
          */
         "onTextareaBlur"?: (event: AdmiraltyTextareaCustomEvent<any>) => void;
         /**
-          * Event is fired when the form control changes
-          * @event textareaChanged
-         */
-        "onTextareaChanged"?: (event: AdmiraltyTextareaCustomEvent<string>) => void;
-        /**
-          * The contents of the textarea
+          * The value of the textarea.
          */
-        "text"?: string;
+        "value"?: string | number | null;
         /**
           * The maximum width for the input field.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
   "license": "MIT",
   "url": "https://github.com/UKHO/admiralty-design-system",
   "repository": "git://github.com/UKHO/admiralty-design-system.git",
-  "gitHead": "1423f3d5a7e7952b6bbe06774a1c40ab161930c7"
+  "gitHead": "5f92283ce88a3cb535cf2e1a79e917beebdb50c7"
 }

package/dist/admiralty/p-26a07388.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","textareaIds","TextareaComponent","this","inputId","onBlur","textareaBlur","emit","onChange","_ev","textareaChanged","text","render","h","Host","class","label","for","disabled","hint","invalid","style","width","maxWidth","id","maxlength","maxLength","invalidMessage"],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/base/responsive\";\n@use \"../../scss/base/typography\";\n@use \"../../scss/vars/typography\" as typography-vars;\n\n\n.text-area-container {\n  textarea {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-height: 170px;\n    border: 2px solid colours.$colour-text;\n    color: colours.$colour-text;\n    padding: 12px 18px;\n    outline: none;\n    resize: vertical;\n    overflow: auto;\n    box-sizing: border-box;\n    vertical-align: top;\n\n    background-color: colours.$colour-white;\n\n    &:focus-visible {\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The contents of the textarea\n   */\n  @Prop() text: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event textareaChanged\n   */\n  @Event({ eventName: 'textareaChanged' }) textareaChanged: EventEmitter<string>;\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onChange = (_ev: any) => {\n    this.textareaChanged.emit(this.text);\n  };\n  render() {\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            maxlength={this.maxLength}\n            onChange={this.onChange}\n            onBlur={this.onBlur}\n          >\n            {this.text}\n          </textarea>\n          {this.invalid ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,g+ICEpB,IAAIC,EAAc,E,MAOLC,EAAiB,M,qHACpBC,KAAAC,QAAU,sBAAsBH,MAsDhCE,KAAAE,OAAS,KACfF,KAAKG,aAAaC,MAAM,EAGlBJ,KAAAK,SAAYC,IAClBN,KAAKO,gBAAgBH,KAAKJ,KAAKQ,KAAK,E,WAtDd,G,UAKD,G,gFAoBK,M,aAKD,M,8BA0B3BC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,uBACRZ,KAAKa,MACJH,EAAA,mBAAiBI,IAAKd,KAAKC,QAASc,SAAUf,KAAKe,UAChDf,KAAKa,OAEN,KACHb,KAAKgB,KAAON,EAAA,kBAAgBK,SAAUf,KAAKe,UAAWf,KAAKgB,MAAyB,KACrFN,EAAA,YACEE,MAAO,CAAEG,SAAUf,KAAKe,SAAUE,QAASjB,KAAKiB,SAChDC,MAAOlB,KAAKmB,MAAQ,CAAEC,SAAU,GAAGpB,KAAKmB,WAAc,GACtDE,GAAIrB,KAAKC,QACTqB,UAAWtB,KAAKuB,UAChBlB,SAAUL,KAAKK,SACfH,OAAQF,KAAKE,QAEZF,KAAKQ,MAEPR,KAAKiB,QAAUP,EAAA,6BAAwBV,KAAKwB,gBAA0C,M"}