@ukho/admiralty-core 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admiralty/admiralty.esm.js +1 -1
- package/dist/admiralty/{p-b1ed4e60.entry.js → p-8b01423e.entry.js} +2 -2
- package/dist/admiralty/{p-b1ed4e60.entry.js.map → p-8b01423e.entry.js.map} +1 -1
- package/dist/admiralty/{p-88ef5eaa.entry.js → p-d7ee2a19.entry.js} +2 -2
- package/dist/admiralty/{p-88ef5eaa.entry.js.map → p-d7ee2a19.entry.js.map} +1 -1
- package/dist/cjs/admiralty-input.cjs.entry.js +1 -1
- package/dist/cjs/admiralty-input.cjs.entry.js.map +1 -1
- package/dist/cjs/admiralty-textarea.cjs.entry.js +1 -1
- package/dist/cjs/admiralty-textarea.cjs.entry.js.map +1 -1
- package/dist/collection/components/input/input.js +1 -1
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/collection/components/input/input.spec.js +6 -4
- package/dist/collection/components/input/input.spec.js.map +1 -1
- package/dist/collection/components/textarea/textarea.js +1 -1
- package/dist/collection/components/textarea/textarea.js.map +1 -1
- package/dist/collection/components/textarea/textarea.spec.js +20 -3
- package/dist/collection/components/textarea/textarea.spec.js.map +1 -1
- package/dist/components/admiralty-textarea.js +1 -1
- package/dist/components/admiralty-textarea.js.map +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/input.js.map +1 -1
- package/dist/esm/admiralty-input.entry.js +1 -1
- package/dist/esm/admiralty-input.entry.js.map +1 -1
- package/dist/esm/admiralty-textarea.entry.js +1 -1
- package/dist/esm/admiralty-textarea.entry.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-
|
|
1
|
+
import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-8b01423e",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f7aa9b55",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-91cfb37d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-58fa7bfb",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-b8dc6756",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-d7ee2a19",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]}]]],["p-0e8192b3",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-9f649906",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-c027f79d",[[6,"admiralty-input-error"],[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=admiralty.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as a,h as e,H as i}from"./p-a2b7bb90.js";const r='@charset "UTF-8";@media (max-width: 1023px){.desktop-only.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-textarea{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-textarea{display:none}}*.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*.sc-admiralty-textarea{font-size:16px}}a.sc-admiralty-textarea{color:#09315b}a.sc-admiralty-textarea:focus{outline:3px solid #ffdd00;outline-offset:1px}h1.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:48px;line-height:60px;margin:0 0 30px 0}@media (max-width: 1023px){h1.sc-admiralty-textarea{font-size:46px;line-height:54px}}h2.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:36px;line-height:48px;margin-bottom:18px}@media (max-width: 1023px){h2.sc-admiralty-textarea{font-size:34px;line-height:42px}}h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:21px;line-height:30px;margin-bottom:12px}@media (max-width: 1023px){h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-size:20px;line-height:30px}}h6.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:18px;line-height:24px;margin-bottom:12px}@media (max-width: 1023px){h6.sc-admiralty-textarea{font-size:16px}}p.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;margin-bottom:30px}.intro.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro.sc-admiralty-textarea{font-size:26px}}.small.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small.sc-admiralty-textarea{font-size:14px;line-height:22px}}blockquote.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;line-height:30px;width:100%;padding:24px 18px;border-left:5px solid #09315b;margin-bottom:30px;background:#eeeeee}@media (max-width: 1023px){blockquote.sc-admiralty-textarea{line-height:24px}}ul.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none}ul.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ul.sc-admiralty-textarea li.sc-admiralty-textarea{margin-bottom:12px}ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:"■";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{font-size:8px}}ol.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none;counter-reset:li}ol.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ol.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:counter(li) ".";color:#03284f;font-size:18px;margin-right:12px}ol.sc-admiralty-textarea li.sc-admiralty-textarea{counter-increment:li;margin-bottom:12px}.white-text.sc-admiralty-textarea *.sc-admiralty-textarea{color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea{display:block;position:relative;width:100%;min-height:170px;border:2px solid #333333;color:#333333;padding:12px 18px;outline:none;resize:vertical;overflow:auto;box-sizing:border-box;vertical-align:top;background-color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea:focus-visible{outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea{border-color:#e20d0d}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-area-container.sc-admiralty-textarea textarea.disabled.sc-admiralty-textarea{color:#adadad;border-color:#adadad;background:#ffffff}';let s=0;const l=class{constructor(e){t(this,e);this.textareaBlur=a(this,"textareaBlur",7);this.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};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as a,h as e,H as i}from"./p-a2b7bb90.js";const r='@charset "UTF-8";@media (max-width: 1023px){.desktop-only.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-textarea{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-textarea{display:none}}*.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*.sc-admiralty-textarea{font-size:16px}}a.sc-admiralty-textarea{color:#09315b}a.sc-admiralty-textarea:focus{outline:3px solid #ffdd00;outline-offset:1px}h1.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:48px;line-height:60px;margin:0 0 30px 0}@media (max-width: 1023px){h1.sc-admiralty-textarea{font-size:46px;line-height:54px}}h2.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:36px;line-height:48px;margin-bottom:18px}@media (max-width: 1023px){h2.sc-admiralty-textarea{font-size:34px;line-height:42px}}h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:21px;line-height:30px;margin-bottom:12px}@media (max-width: 1023px){h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-size:20px;line-height:30px}}h6.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:18px;line-height:24px;margin-bottom:12px}@media (max-width: 1023px){h6.sc-admiralty-textarea{font-size:16px}}p.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;margin-bottom:30px}.intro.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro.sc-admiralty-textarea{font-size:26px}}.small.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small.sc-admiralty-textarea{font-size:14px;line-height:22px}}blockquote.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;line-height:30px;width:100%;padding:24px 18px;border-left:5px solid #09315b;margin-bottom:30px;background:#eeeeee}@media (max-width: 1023px){blockquote.sc-admiralty-textarea{line-height:24px}}ul.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none}ul.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ul.sc-admiralty-textarea li.sc-admiralty-textarea{margin-bottom:12px}ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:"■";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{font-size:8px}}ol.sc-admiralty-textarea{font-family:"JohnstonITC", Helvetica, sans-serif;list-style:none;counter-reset:li}ol.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ol.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:counter(li) ".";color:#03284f;font-size:18px;margin-right:12px}ol.sc-admiralty-textarea li.sc-admiralty-textarea{counter-increment:li;margin-bottom:12px}.white-text.sc-admiralty-textarea *.sc-admiralty-textarea{color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea{display:block;position:relative;width:100%;min-height:170px;border:2px solid #333333;color:#333333;padding:12px 18px;outline:none;resize:vertical;overflow:auto;box-sizing:border-box;vertical-align:top;background-color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea:focus-visible{outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea{border-color:#e20d0d}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-area-container.sc-admiralty-textarea textarea.disabled.sc-admiralty-textarea{color:#adadad;border-color:#adadad;background:#ffffff}';let s=0;const l=class{constructor(e){t(this,e);this.textareaBlur=a(this,"textareaBlur",7);this.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&&this.invalidMessage?e("admiralty-input-error",null,this.invalidMessage):null))}static get watchers(){return{value:["valueChanged"]}}};l.style=r;export{l as admiralty_textarea};
|
|
2
|
+
//# sourceMappingURL=p-8b01423e.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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 && this.invalidMessage ? <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,SAAW1B,KAAKgC,eAAiBf,EAAA,6BAAwBjB,KAAKgC,gBAA0C,M"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as i,h as s}from"./p-a2b7bb90.js";const n=".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";const e=class{constructor(s){t(this,s);this.admiraltyChange=i(this,"admiraltyChange",7);this.inputId=`admiralty-input-${++a}`;this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}};this.name=this.inputId;this.label=undefined;this.hint=undefined;this.disabled=false;this.type="text";this.placeholder=undefined;this.width=undefined;this.maxLength=undefined;this.required=false;this.invalid=false;this.invalidMessage=undefined;this.autocomplete="off";this.value=""}valueChanged(){const t=this.nativeInput;const i=this.getValue();if(t&&t.value!==i){t.value=i}this.admiraltyChange.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return s("div",{class:"text-input-container"},this.label?s("admiralty-label",{disabled:this.disabled,for:this.inputId},this.label):null,this.hint?s("admiralty-hint",{disabled:this.disabled},this.hint):null,s("input",{ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:this.inputId,name:this.name,type:this.type,value:t,maxLength:this.maxLength,onInput:this.onInput,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null}}),s("admiralty-input-error",{style:{visibility:this.invalid?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let a=0;e.style=n;export{e as admiralty_input};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as i,h as s}from"./p-a2b7bb90.js";const n=".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";const e=class{constructor(s){t(this,s);this.admiraltyChange=i(this,"admiraltyChange",7);this.inputId=`admiralty-input-${++a}`;this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}};this.name=this.inputId;this.label=undefined;this.hint=undefined;this.disabled=false;this.type="text";this.placeholder=undefined;this.width=undefined;this.maxLength=undefined;this.required=false;this.invalid=false;this.invalidMessage=undefined;this.autocomplete="off";this.value=""}valueChanged(){const t=this.nativeInput;const i=this.getValue();if(t&&t.value!==i){t.value=i}this.admiraltyChange.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return s("div",{class:"text-input-container"},this.label?s("admiralty-label",{disabled:this.disabled,for:this.inputId},this.label):null,this.hint?s("admiralty-hint",{disabled:this.disabled},this.hint):null,s("input",{ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:this.inputId,name:this.name,type:this.type,value:t,maxLength:this.maxLength,onInput:this.onInput,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null}}),s("admiralty-input-error",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let a=0;e.style=n;export{e as admiralty_input};
|
|
2
|
+
//# sourceMappingURL=p-d7ee2a19.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyChange","emit","toString","render","h","class","label","disabled","for","hint","ref","invalid","id","name","type","maxLength","placeholder","autoComplete","autocomplete","required","style","maxWidth","width","visibility","invalidMessage"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,84B,MCeJC,EAAc,M,0EACzBC,KAAAC,QAAkB,qBAAqBC,IAuF/BF,KAAAG,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,aAnFTP,KAAKC,Q,uDAeT,M,UAK6D,O,uFAoBpD,M,aAKD,M,gDAUI,M,WAK2B,E,CAWhDO,eACR,MAAMC,EAAcT,KAAKS,YACzB,MAAMF,EAAQP,KAAKU,WACnB,GAAID,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBP,KAAKW,gBAAgBC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU/EH,WACN,cAAcV,KAAKO,QAAU,SAAWP,KAAKO,MAAMM,YAAcb,KAAKO,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQP,KAAKU,WACnB,OACEK,EAAA,OAAKC,MAAM,wBACRhB,KAAKiB,MACJF,EAAA,mBAAiBG,SAAUlB,KAAKkB,SAAUC,IAAKnB,KAAKC,SACjDD,KAAKiB,OAEN,KACHjB,KAAKoB,KAAOL,EAAA,kBAAgBG,SAAUlB,KAAKkB,UAAWlB,KAAKoB,MAAyB,KACrFL,EAAA,SACEM,IAAKhB,GAAUL,KAAKS,YAAcJ,EAClCW,MAAO,CAAEE,SAAUlB,KAAKkB,SAAUI,QAAStB,KAAKsB,SAChDJ,SAAUlB,KAAKkB,SACfK,GAAIvB,KAAKC,QACTuB,KAAMxB,KAAKwB,KACXC,KAAMzB,KAAKyB,KACXlB,MAAOA,EACPmB,UAAW1B,KAAK0B,UAChBvB,QAASH,KAAKG,QACdwB,YAAa3B,KAAK2B,YAClBC,aAAc5B,KAAK6B,aACnBC,SAAU9B,KAAK8B,SACfC,MAAO,CACLC,SAAUhC,KAAKiC,MAAQ,GAAGjC,KAAKiC,UAAY,QAG/ClB,EAAA,yBAAuBgB,MAAO,CAAEG,WAAYlC,KAAKsB,
|
|
1
|
+
{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyChange","emit","toString","render","h","class","label","disabled","for","hint","ref","invalid","id","name","type","maxLength","placeholder","autoComplete","autocomplete","required","style","maxWidth","width","visibility","invalidMessage"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,84B,MCeJC,EAAc,M,0EACzBC,KAAAC,QAAkB,qBAAqBC,IAuF/BF,KAAAG,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,aAnFTP,KAAKC,Q,uDAeT,M,UAK6D,O,uFAoBpD,M,aAKD,M,gDAUI,M,WAK2B,E,CAWhDO,eACR,MAAMC,EAAcT,KAAKS,YACzB,MAAMF,EAAQP,KAAKU,WACnB,GAAID,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBP,KAAKW,gBAAgBC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU/EH,WACN,cAAcV,KAAKO,QAAU,SAAWP,KAAKO,MAAMM,YAAcb,KAAKO,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQP,KAAKU,WACnB,OACEK,EAAA,OAAKC,MAAM,wBACRhB,KAAKiB,MACJF,EAAA,mBAAiBG,SAAUlB,KAAKkB,SAAUC,IAAKnB,KAAKC,SACjDD,KAAKiB,OAEN,KACHjB,KAAKoB,KAAOL,EAAA,kBAAgBG,SAAUlB,KAAKkB,UAAWlB,KAAKoB,MAAyB,KACrFL,EAAA,SACEM,IAAKhB,GAAUL,KAAKS,YAAcJ,EAClCW,MAAO,CAAEE,SAAUlB,KAAKkB,SAAUI,QAAStB,KAAKsB,SAChDJ,SAAUlB,KAAKkB,SACfK,GAAIvB,KAAKC,QACTuB,KAAMxB,KAAKwB,KACXC,KAAMzB,KAAKyB,KACXlB,MAAOA,EACPmB,UAAW1B,KAAK0B,UAChBvB,QAASH,KAAKG,QACdwB,YAAa3B,KAAK2B,YAClBC,aAAc5B,KAAK6B,aACnBC,SAAU9B,KAAK8B,SACfC,MAAO,CACLC,SAAUhC,KAAKiC,MAAQ,GAAGjC,KAAKiC,UAAY,QAG/ClB,EAAA,yBAAuBgB,MAAO,CAAEG,WAAYlC,KAAKsB,SAAWtB,KAAKmC,eAAiB,UAAY,WAAanC,KAAKmC,gB,wDAKxH,IAAIjC,EAAS,E"}
|
|
@@ -49,7 +49,7 @@ const InputComponent = class {
|
|
|
49
49
|
const value = this.getValue();
|
|
50
50
|
return (index.h("div", { class: "text-input-container" }, this.label ? (index.h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
|
|
51
51
|
maxWidth: this.width ? `${this.width}px` : null,
|
|
52
|
-
} }), index.h("admiralty-input-error", { style: { visibility: this.invalid ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
52
|
+
} }), index.h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
53
53
|
}
|
|
54
54
|
static get watchers() { return {
|
|
55
55
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACTA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,mBACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACFA,mCAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,
|
|
1
|
+
{"file":"admiralty-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACTA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,mBACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACFA,mCAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
|
|
@@ -47,7 +47,7 @@ const TextareaComponent = class {
|
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
49
|
const value = this.getValue();
|
|
50
|
-
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)));
|
|
50
|
+
return (index.h(index.Host, null, index.h("div", { class: "text-area-container" }, this.label ? (index.h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), this.invalid && this.invalidMessage ? index.h("admiralty-input-error", null, this.invalidMessage) : null)));
|
|
51
51
|
}
|
|
52
52
|
static get watchers() { return {
|
|
53
53
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-textarea.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2/IAA2/I;;ACG/gJ,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,iBAAiB;;;;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAqEhD,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;iBAvEsB,EAAE;;;;oBAoBE,KAAK;mBAKN,KAAK;;iBAsB0B,EAAE;;;;;EAMlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,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,
|
|
1
|
+
{"file":"admiralty-textarea.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2/IAA2/I;;ACG/gJ,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,iBAAiB;;;;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAqEhD,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;iBAvEsB,EAAE;;;;oBAoBE,KAAK;mBAKN,KAAK;;iBAsB0B,EAAE;;;;;EAMlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,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,IAAI,IAAI,CAAC,cAAc,GAAGA,uCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CAC9G,CACD,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/base/responsive\";\n@use \"../../scss/base/typography\";\n@use \"../../scss/vars/typography\" as typography-vars;\n\n\n.text-area-container {\n textarea {\n display: block;\n position: relative;\n width: 100%;\n min-height: 170px;\n border: 2px solid colours.$colour-text;\n color: colours.$colour-text;\n padding: 12px 18px;\n outline: none;\n resize: vertical;\n overflow: auto;\n box-sizing: border-box;\n vertical-align: top;\n\n background-color: colours.$colour-white;\n\n &:focus-visible {\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { TextAreaChangeEventDetail } from './textarea.interface';\n\nlet textareaIds = 0;\n\n@Component({\n tag: 'admiralty-textarea',\n styleUrl: 'textarea.scss',\n scoped: true,\n})\nexport class TextareaComponent {\n private inputId = `admiralty-textarea-${textareaIds++}`;\n\n private nativeTextArea?: HTMLTextAreaElement;\n\n /**\n * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n */\n @Prop() label: string = '';\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width?: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Event is fired when the form control loses focus\n * @event textareaBlur\n */\n @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n /**\n * Event is fired when the form control changes\n * @event admiraltyChange\n */\n @Event() 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 && this.invalidMessage ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -46,7 +46,7 @@ export class InputComponent {
|
|
|
46
46
|
const value = this.getValue();
|
|
47
47
|
return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
|
|
48
48
|
maxWidth: this.width ? `${this.width}px` : null,
|
|
49
|
-
} }), h("admiralty-input-error", { style: { visibility: this.invalid ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
49
|
+
} }), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
50
50
|
}
|
|
51
51
|
static get is() { return "admiralty-input"; }
|
|
52
52
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"]}
|
|
@@ -53,7 +53,7 @@ describe('admiralty-input', () => {
|
|
|
53
53
|
<admiralty-input invalid="true">
|
|
54
54
|
<div class="text-input-container">
|
|
55
55
|
<input autocomplete="off" class="invalid" id="admiralty-input-4" name="admiralty-input-4" type="text" value="">
|
|
56
|
-
<admiralty-input-error style="visibility:
|
|
56
|
+
<admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
|
|
57
57
|
</div>
|
|
58
58
|
</admiralty-input>
|
|
59
59
|
`);
|
|
@@ -61,13 +61,15 @@ describe('admiralty-input', () => {
|
|
|
61
61
|
it('renders invalid with invalidMessage', async () => {
|
|
62
62
|
const page = await newSpecPage({
|
|
63
63
|
components: [InputComponent],
|
|
64
|
-
html: `<admiralty-input invalid="true"
|
|
64
|
+
html: `<admiralty-input invalid="true" invalid-message="This is invalid!"></admiralty-input>`,
|
|
65
65
|
});
|
|
66
66
|
expect(page.root).toEqualHtml(`
|
|
67
|
-
<admiralty-input invalid="true"
|
|
67
|
+
<admiralty-input invalid="true" invalid-message="This is invalid!">
|
|
68
68
|
<div class="text-input-container">
|
|
69
69
|
<input autocomplete="off" class="invalid" id="admiralty-input-5" name="admiralty-input-5" type="text" value="">
|
|
70
|
-
<admiralty-input-error style="visibility: visible;"
|
|
70
|
+
<admiralty-input-error style="visibility: visible;">
|
|
71
|
+
This is invalid!
|
|
72
|
+
</admiralty-input-error>
|
|
71
73
|
</div>
|
|
72
74
|
</admiralty-input>
|
|
73
75
|
`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.spec.js","sourceRoot":"","sources":["../../../src/components/input/input.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,wDAAwD;KAC/D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"input.spec.js","sourceRoot":"","sources":["../../../src/components/input/input.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,wDAAwD;KAC/D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;EACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;IAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;IAC5B,IAAI,EAAE,oDAAoD;GAC3D,CAAC,CAAC;EACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;GAO7B,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { InputComponent } from './input';\n\ndescribe('admiralty-input', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input>\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" id=\"admiralty-input-1\" name=\"admiralty-input-1\" type=\"text\" value=\"\">\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders with a label', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input label=\"test-label\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input label=\"test-label\">\n <div class=\"text-input-container\">\n <admiralty-label for=\"admiralty-input-2\">test-label</admiralty-label>\n <input autocomplete=\"off\" id=\"admiralty-input-2\" name=\"admiralty-input-2\" type=\"text\" value=\"\">\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders disabled', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input disabled></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input disabled>\n <div class=\"text-input-container\">\n <input disabled autocomplete=\"off\" class=\"disabled\" id=\"admiralty-input-3\" name=\"admiralty-input-3\" type=\"text\" value=\"\">\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders invalid even without invalidMessage', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input invalid=\"true\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input invalid=\"true\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-4\" name=\"admiralty-input-4\" type=\"text\" value=\"\">\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders invalid with invalidMessage', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input invalid=\"true\" invalid-message=\"This is invalid!\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input invalid=\"true\" invalid-message=\"This is invalid!\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-5\" name=\"admiralty-input-5\" type=\"text\" value=\"\">\n <admiralty-input-error style=\"visibility: visible;\">\n This is invalid!\n </admiralty-input-error>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders with type', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input type=\"date\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input type=\"date\">\n <div class=\"text-input-container\">\n <input type=\"date\" autocomplete=\"off\" id=\"admiralty-input-6\" name=\"admiralty-input-6\" value=\"\">\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-input>\n `);\n });\n});\n\nit('renders with maxlength', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input max-length=\"1\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input max-length=\"1\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"\" id=\"admiralty-input-7\" maxlength=\"1\" name=\"admiralty-input-7\" type=\"text\" value=\"\">\n <admiralty-input-error style=\"visibility: hidden;\"></admiralty-input-error>\n </div>\n </admiralty-input>\n `);\n});\n"]}
|
|
@@ -37,7 +37,7 @@ export class TextareaComponent {
|
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
39
|
const value = this.getValue();
|
|
40
|
-
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)));
|
|
40
|
+
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 && this.invalidMessage ? h("admiralty-input-error", null, this.invalidMessage) : null)));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "admiralty-textarea"; }
|
|
43
43
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +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,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,
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","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 && this.invalidMessage ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -56,14 +56,31 @@ describe('admiralty-textarea', () => {
|
|
|
56
56
|
++compId;
|
|
57
57
|
const page = await newSpecPage({
|
|
58
58
|
components: [TextareaComponent],
|
|
59
|
-
html: `<admiralty-textarea label="Description" invalid="true"
|
|
59
|
+
html: `<admiralty-textarea label="Description" invalid="true" invalid-message="BAD"></admiralty-textarea>`,
|
|
60
60
|
});
|
|
61
61
|
expect(page.root).toEqualHtml(`
|
|
62
|
-
<admiralty-textarea label="Description" invalid="true"
|
|
62
|
+
<admiralty-textarea label="Description" invalid="true" invalid-message="BAD">
|
|
63
|
+
<div class="text-area-container">
|
|
64
|
+
<admiralty-label for="admiralty-textarea-${compId}">Description</admiralty-label>
|
|
65
|
+
<textarea class="invalid" id="admiralty-textarea-${compId}" value=""></textarea>
|
|
66
|
+
<admiralty-input-error>
|
|
67
|
+
BAD
|
|
68
|
+
</admiralty-input-error>
|
|
69
|
+
</div>
|
|
70
|
+
</admiralty-textarea>
|
|
71
|
+
`);
|
|
72
|
+
});
|
|
73
|
+
it('should not show admiralty-input-error when invalid but no message provided', async () => {
|
|
74
|
+
++compId;
|
|
75
|
+
const page = await newSpecPage({
|
|
76
|
+
components: [TextareaComponent],
|
|
77
|
+
html: `<admiralty-textarea label="Description" invalid="true" invalidMessage=""></admiralty-textarea>`,
|
|
78
|
+
});
|
|
79
|
+
expect(page.root).toEqualHtml(`
|
|
80
|
+
<admiralty-textarea label="Description" invalid="true" invalidMessage="">
|
|
63
81
|
<div class="text-area-container">
|
|
64
82
|
<admiralty-label for="admiralty-textarea-${compId}">Description</admiralty-label>
|
|
65
83
|
<textarea class="invalid" id="admiralty-textarea-${compId}" value=""></textarea>
|
|
66
|
-
<admiralty-input-error></admiralty-input-error>
|
|
67
84
|
</div>
|
|
68
85
|
</admiralty-textarea>
|
|
69
86
|
`);
|
|
@@ -1 +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,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,
|
|
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,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,oGAAoG;KAC3G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;;;;KAM9D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;IAC1F,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,gGAAgG;KACvG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;KAG9D,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\" invalid-message=\"BAD\"></admiralty-textarea>`,\n });\n\n expect(page.root).toEqualHtml(`\n <admiralty-textarea label=\"Description\" invalid=\"true\" invalid-message=\"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>\n BAD\n </admiralty-input-error>\n </div>\n </admiralty-textarea>\n `);\n });\n\n it('should not show admiralty-input-error when invalid but no message provided', async () => {\n ++compId;\n\n const page = await newSpecPage({\n components: [TextareaComponent],\n html: `<admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"\"></admiralty-textarea>`,\n });\n\n expect(page.root).toEqualHtml(`\n <admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"\">\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 </div>\n </admiralty-textarea>\n `);\n });\n});\n"]}
|
|
@@ -48,7 +48,7 @@ const TextareaComponent = /*@__PURE__*/ proxyCustomElement(class TextareaCompone
|
|
|
48
48
|
}
|
|
49
49
|
render() {
|
|
50
50
|
const value = this.getValue();
|
|
51
|
-
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)));
|
|
51
|
+
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 && this.invalidMessage ? h("admiralty-input-error", null, this.invalidMessage) : null)));
|
|
52
52
|
}
|
|
53
53
|
static get watchers() { return {
|
|
54
54
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,IAAI,IAAI,CAAC,cAAc,GAAG,iCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CAC9G,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 && this.invalidMessage ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
package/dist/components/input.js
CHANGED
|
@@ -50,7 +50,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
|
|
|
50
50
|
const value = this.getValue();
|
|
51
51
|
return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
|
|
52
52
|
maxWidth: this.width ? `${this.width}px` : null,
|
|
53
|
-
} }), h("admiralty-input-error", { style: { visibility: this.invalid ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
53
|
+
} }), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
54
54
|
}
|
|
55
55
|
static get watchers() { return {
|
|
56
56
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"input.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,
|
|
1
|
+
{"file":"input.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
|
|
@@ -45,7 +45,7 @@ const InputComponent = class {
|
|
|
45
45
|
const value = this.getValue();
|
|
46
46
|
return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
|
|
47
47
|
maxWidth: this.width ? `${this.width}px` : null,
|
|
48
|
-
} }), h("admiralty-input-error", { style: { visibility: this.invalid ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
48
|
+
} }), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
|
|
49
49
|
}
|
|
50
50
|
static get watchers() { return {
|
|
51
51
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,
|
|
1
|
+
{"file":"admiralty-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
|
|
@@ -43,7 +43,7 @@ const TextareaComponent = class {
|
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
45
|
const value = this.getValue();
|
|
46
|
-
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)));
|
|
46
|
+
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 && this.invalidMessage ? h("admiralty-input-error", null, this.invalidMessage) : null)));
|
|
47
47
|
}
|
|
48
48
|
static get watchers() { return {
|
|
49
49
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,IAAI,IAAI,CAAC,cAAc,GAAG,iCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CAC9G,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 && this.invalidMessage ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "Stencil Component Starter",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"license": "MIT",
|
|
68
68
|
"url": "https://github.com/UKHO/admiralty-design-system",
|
|
69
69
|
"repository": "git://github.com/UKHO/admiralty-design-system.git",
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "4fe51f1761d5192cab5ae0d9ab1549de66edc6df"
|
|
71
71
|
}
|