@department-of-veterans-affairs/component-library 46.0.2 → 46.1.3

package/dist/components/va-text-input2.js

@@ -1 +1 @@
-import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import"./i18n-setup.js";import"./contacts.js";import{c as consoleDevError,b as getCharacterMessage,a as getHeaderLevel}from"./utils.js";import{d as defineCustomElement$1}from"./va-icon2.js";import{i as instance}from"./i18next.js";const vaTextInputCss='button:not([disabled]):focus,:host([uswds=\'false\']) button:not([disabled]):active,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:0.87rem;line-height:1.1;font-weight:normal;letter-spacing:0.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:700}h6{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:0.9375rem}h6{font-size:0.9375rem}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}:host legend :is(h1,h2,h3,h4,h5,h6),:host label :is(h1,h2,h3,h4,h5,h6){display:inline;margin:0px}:host legend :is(h1,h2,h3,h4,h5),:host label :is(h1,h2,h3,h4,h5){font-family:var(--font-serif)}:host h1+*,:host h2+*,:host h3+*,:host h4+*,:host h5+*,:host h6+*{margin-top:unset}:host #form-question{margin-bottom:1rem}.usa-hint,.usa-input-group,.usa-input{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-input-group,.usa-input{border-width:1px;border-color:#565c65;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:0.5rem;max-width:30rem;padding:0.5rem;width:100%}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-input:disabled,.usa-input[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#454545}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:0;color:GrayText}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:2px solid GrayText}}.usa-input--error{border-width:0.25rem;border-color:#b50909;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input--success{border-width:0.25rem;border-color:#00a91c;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input-group{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:0;position:relative}.usa-input-group--error input:focus,.usa-input-group--success input:focus{outline-offset:0.25rem}.usa-input-group--error{border-width:0.25rem;border-color:#b50909;border-style:solid}.usa-input-group--success{border-width:0.25rem;border-color:#00a91c;border-style:solid}.usa-input-group input{padding-right:2.5rem;border:0;height:100%;margin-top:0;min-width:0;width:100%}.usa-input-group input:disabled+.usa-input-suffix,.usa-input-group input[aria-disabled=true]+.usa-input-suffix{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-input-group input:disabled+.usa-input-suffix:hover,.usa-input-group input:disabled+.usa-input-suffix:active,.usa-input-group input:disabled+.usa-input-suffix:focus,.usa-input-group input:disabled+.usa-input-suffix.usa-focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:hover,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:active,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix.usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input-group input:disabled+.usa-input-suffix,.usa-input-group input[aria-disabled=true]+.usa-input-suffix{border:0;color:GrayText}.usa-input-group input:disabled+.usa-input-suffix:hover,.usa-input-group input:disabled+.usa-input-suffix:active,.usa-input-group input:disabled+.usa-input-suffix:focus,.usa-input-group input:disabled+.usa-input-suffix.usa-focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:hover,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:active,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix.usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input-group input:disabled,.usa-input-group input[aria-disabled=true]{border:0}}@media (forced-colors: active){.usa-input-group:has(input:disabled),.usa-input-group:has(input[aria-disabled=true]){border:2px solid GrayText}}.usa-input-prefix:has(+input:disabled),.usa-input-prefix:has(+input[aria-disabled=true]){color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-input-prefix:has(+input:disabled):hover,.usa-input-prefix:has(+input:disabled):active,.usa-input-prefix:has(+input:disabled):focus,.usa-input-prefix:has(+input:disabled).usa-focus,.usa-input-prefix:has(+input[aria-disabled=true]):hover,.usa-input-prefix:has(+input[aria-disabled=true]):active,.usa-input-prefix:has(+input[aria-disabled=true]):focus,.usa-input-prefix:has(+input[aria-disabled=true]).usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input-prefix:has(+input:disabled),.usa-input-prefix:has(+input[aria-disabled=true]){border:0;color:GrayText}.usa-input-prefix:has(+input:disabled):hover,.usa-input-prefix:has(+input:disabled):active,.usa-input-prefix:has(+input:disabled):focus,.usa-input-prefix:has(+input:disabled).usa-focus,.usa-input-prefix:has(+input[aria-disabled=true]):hover,.usa-input-prefix:has(+input[aria-disabled=true]):active,.usa-input-prefix:has(+input[aria-disabled=true]):focus,.usa-input-prefix:has(+input[aria-disabled=true]).usa-focus{color:GrayText}}.usa-input-prefix,.usa-input-suffix{position:absolute;color:#71767a;line-height:0;padding:0 0.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.usa-input-prefix .usa-icon,.usa-input-suffix .usa-icon{height:1.5rem;width:1.5rem}.usa-input-prefix+input{padding-left:2.5rem;padding-right:0.5rem}.usa-input-suffix{right:0}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-character-count__status{display:inline-block;padding-top:0.25rem}.usa-character-count__status.usa-character-count__status--invalid{color:#b50909;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""]):not([uswds=false])){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""]):not([uswds=false])){margin-left:-0.9rem}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){padding-left:0}}:host([uswds=false]) .usa-input--2xs,:host .usa-input--2xs{max-width:5ex}:host([uswds=false]) .usa-input--xs,:host .usa-input--xs{max-width:9ex}:host([uswds=false]) .usa-input--sm,:host([uswds=false]) .usa-input--small,:host .usa-input--sm,:host .usa-input--small{max-width:13ex}:host([uswds=false]) .usa-input--md,:host([uswds=false]) .usa-input--medium,:host .usa-input--md,:host .usa-input--medium{max-width:20ex}:host([uswds=false]) .usa-input--lg,:host .usa-input--lg{max-width:30ex}:host([uswds=false]) .usa-input--xl,:host .usa-input--xl{max-width:40ex}:host([uswds=false]) .usa-input--2xl,:host .usa-input--2xl{max-width:50ex}:host(:not([uswds=false])){color:var(--vads-color-base)}:host{display:block;font-family:var(--font-source-sans)}:host(:focus){outline:none !important}:host(:not([uswds=false])) input:not([disabled]):focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}input{-webkit-box-sizing:border-box;box-sizing:border-box}input.usa-input{color:var(--vads-color-base)}.usa-hint{display:block}.currency-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.currency-wrapper>div{position:absolute;left:10px}.currency-wrapper #symbol{margin-top:8px}.currency-wrapper #inputField{padding-left:25px}:host([error]:not([error=""])[show-input-error=false]){border-left:0;padding-left:0;margin-left:0}';Build.isTesting&&instance.init({lng:"cimode"});const VaTextInput=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.allowedInputTypes=["email","number","search","tel","text","url"],this.updatePaddingLeft=()=>{if(this.inputIconPrefix)this.paddingLeftValue="2.5rem";else if(this.inputPrefix){const e=this.inputPrefix?Math.min(this.inputPrefix.length,25):null;this.paddingLeftValue=.5*e+1+"rem"}},this.updatePaddingRight=()=>{const e=this.inputSuffix?Math.min(this.inputSuffix.length,25):null;this.paddingRightValue=.5*e+1+"rem"},this.handleInput=e=>{const i=e.target;this.value=i.value},this.handleBlur=e=>{if(this.enableAnalytics&&this.componentLibraryAnalytics.emit({componentName:"va-text-input",action:"blur",details:{label:this.label,value:this.value}}),"decimal"===this.inputmode||"numeric"===this.inputmode||this.currency){let i=instance.t("number-error");const t=e.target.checkValidity();this.error||t?this.error&&this.error===i&&t&&(this.error=null,this.el.setAttribute("error","")):(this.error=i,this.el.setAttribute("error",i))}},this.label=void 0,this.error=void 0,this.reflectInputError=!1,this.showInputError=!0,this.invalid=!1,this.required=!1,this.inputmode=void 0,this.step=void 0,this.type="text",this.maxlength=void 0,this.autocomplete=void 0,this.enableAnalytics=!1,this.name=void 0,this.pattern=void 0,this.hint=void 0,this.messageAriaDescribedby=void 0,this.value=void 0,this.success=!1,this.width=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.charcount=!1,this.currency=!1,this.inputPrefix=void 0,this.inputIconPrefix=void 0,this.inputSuffix=void 0,this.inputIconSuffix=void 0,this.min=void 0,this.max=void 0,this.paddingLeftValue="0",this.paddingRightValue="0"}componentWillLoad(){this.updatePaddingLeft(),this.updatePaddingRight()}componentDidUpdate(){this.updatePaddingLeft(),this.updatePaddingRight()}getInputType(){return this.allowedInputTypes.includes(this.type)?this.max||this.min?"number":this.type:(consoleDevError(`The input type "${this.type}" is invalid or unsupported!`),"text")}getMaxlength(){if(!(this.maxlength<=0))return this.maxlength;consoleDevError("The maxlength prop must be positive!")}getPattern(){return this.currency?"^[0-9]+(.[0-9]{2})?$":void 0!==this.pattern||"decimal"!==this.inputmode&&"numeric"!==this.inputmode?this.pattern:"[0-9]+(.[0-9]{1,})?"}getInputmode(){return this.currency?"numeric":this.inputmode?this.inputmode:void 0}getStep(){return this.step||"decimal"!==this.inputmode?this.step?this.step:void 0:".01"}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}render(){const{label:e,error:i,reflectInputError:t,showInputError:s,invalid:a,required:r,value:u,name:n,autocomplete:o,hint:p,handleInput:l,handleBlur:d,success:c,messageAriaDescribedby:f,width:m,useFormsPattern:g,formHeadingLevel:b,formHeading:x,charcount:v,min:w,max:y,currency:T,inputPrefix:I,inputIconPrefix:P,inputSuffix:z,inputIconSuffix:E}=this,S=this.getInputType(),H=this.getMaxlength(),k=this.getInputmode(),C=this.getStep(),L=`${f?"input-message":""} ${i?"input-error-message":""} ${v&&H?"charcount-message":""}`.trim()||null,R=`${g&&x?"form-question":""} ${g?"form-description":""} ${g&&e?"input-label":""}`.trim()||null,V=this.getPattern(),A=classnames({"currency-wrapper":T,"usa-input-group":z||I||P||E}),G=(()=>"0"!==this.paddingLeftValue&&I?{paddingLeft:this.paddingLeftValue}:z?{paddingRight:this.paddingRightValue}:{})(),_=H&&(null==u?void 0:u.length)>H,M=classnames({"usa-label":!0,"usa-label--error":i}),q=classnames({"usa-input":!0,"usa-input--success":c,"usa-input--error":i||t,[`usa-input--${m}`]:m}),$=classnames({"usa-hint":!0,"usa-character-count__status":H,"usa-character-count__status--invalid":H&&(null==u?void 0:u.length)>H}),N=classnames({"usa-sr-only":!s});let F=null;if("single"===g||"multiple"===g){const e=getHeaderLevel(b);F=h(Fragment,null,x&&h(e,{id:"form-question",part:"form-header"},x),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}return h(Host,null,F,h("div",{class:"input-wrap"},e&&h("label",{htmlFor:"inputField",id:"input-label",class:M,part:"label"},e,r&&h("span",{class:"usa-label--required"}," ",instance.t("required")),p&&h("span",{class:"usa-hint"},p)),h("slot",null),h("span",{id:"input-error-message",role:"alert",class:N},i&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},i))),h("div",{class:A},T&&h("div",{id:"symbol"},"$"),I&&h("div",{class:"usa-input-prefix",part:"input-prefix"},I.substring(0,25)),P&&h("div",{class:"usa-input-prefix",part:"input-prefix"},h("va-icon",{icon:P,size:3,part:"icon"})),h("input",{class:q,id:"inputField",type:S,value:u,onInput:l,onBlur:d,"aria-describedby":L,style:G,"aria-labelledby":R,"aria-invalid":a||i||_?"true":"false",inputmode:k,step:C,maxlength:H,pattern:V,name:n,autocomplete:o,required:r||null,part:"input",min:w,max:y}),z&&h("div",{class:"usa-input-suffix",part:"suffix","aria-hidden":"true"},z.substring(0,25)),E&&h("div",{class:"usa-input-suffix",part:"input-suffix"},h("va-icon",{icon:E,size:3,part:"icon"}))),f&&h("span",{id:"input-message",class:"usa-sr-only dd-privacy-hidden"},f),v&&H&&h("span",{id:"charcount-message",class:$,"aria-live":"polite"},getCharacterMessage(u,H))))}get el(){return this}static get style(){return vaTextInputCss}},[1,"va-text-input",{label:[1],error:[513],reflectInputError:[4,"reflect-input-error"],showInputError:[516,"show-input-error"],invalid:[4],required:[4],inputmode:[1],step:[1],type:[1],maxlength:[2],autocomplete:[1],enableAnalytics:[4,"enable-analytics"],name:[1],pattern:[1],hint:[1],messageAriaDescribedby:[1,"message-aria-describedby"],value:[1537],success:[4],width:[1],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],charcount:[4],currency:[4],inputPrefix:[1,"input-prefix"],inputIconPrefix:[1,"input-icon-prefix"],inputSuffix:[1,"input-suffix"],inputIconSuffix:[1,"input-icon-suffix"],min:[8],max:[8],paddingLeftValue:[32],paddingRightValue:[32]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-text-input","va-icon"].forEach((e=>{switch(e){case"va-text-input":customElements.get(e)||customElements.define(e,VaTextInput);break;case"va-icon":customElements.get(e)||defineCustomElement$1()}}))}export{VaTextInput as V,defineCustomElement as d};
+import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import"./i18n-setup.js";import"./contacts.js";import{c as consoleDevError,b as getCharacterMessage,a as getHeaderLevel}from"./utils.js";import{d as defineCustomElement$1}from"./va-icon2.js";import{i as instance}from"./i18next.js";const vaTextInputCss='button:not([disabled]):focus,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:0.87rem;line-height:1.1;font-weight:normal;letter-spacing:0.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:700}h6{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:0.9375rem}h6{font-size:0.9375rem}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}:host legend :is(h1,h2,h3,h4,h5,h6),:host label :is(h1,h2,h3,h4,h5,h6){display:inline;margin:0px}:host legend :is(h1,h2,h3,h4,h5),:host label :is(h1,h2,h3,h4,h5){font-family:var(--font-serif)}:host h1+*,:host h2+*,:host h3+*,:host h4+*,:host h5+*,:host h6+*{margin-top:unset}:host #form-question{margin-bottom:1rem}.usa-hint,.usa-input-group,.usa-input{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-input-group,.usa-input{border-width:1px;border-color:#565c65;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:0.5rem;max-width:30rem;padding:0.5rem;width:100%}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-input:disabled,.usa-input[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#454545}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:0;color:GrayText}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:2px solid GrayText}}.usa-input--error{border-width:0.25rem;border-color:#b50909;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input--success{border-width:0.25rem;border-color:#00a91c;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input-group{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:0;position:relative}.usa-input-group--error input:focus,.usa-input-group--success input:focus{outline-offset:0.25rem}.usa-input-group--error{border-width:0.25rem;border-color:#b50909;border-style:solid}.usa-input-group--success{border-width:0.25rem;border-color:#00a91c;border-style:solid}.usa-input-group input{padding-right:2.5rem;border:0;height:100%;margin-top:0;min-width:0;width:100%}.usa-input-group input:disabled+.usa-input-suffix,.usa-input-group input[aria-disabled=true]+.usa-input-suffix{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-input-group input:disabled+.usa-input-suffix:hover,.usa-input-group input:disabled+.usa-input-suffix:active,.usa-input-group input:disabled+.usa-input-suffix:focus,.usa-input-group input:disabled+.usa-input-suffix.usa-focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:hover,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:active,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix.usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input-group input:disabled+.usa-input-suffix,.usa-input-group input[aria-disabled=true]+.usa-input-suffix{border:0;color:GrayText}.usa-input-group input:disabled+.usa-input-suffix:hover,.usa-input-group input:disabled+.usa-input-suffix:active,.usa-input-group input:disabled+.usa-input-suffix:focus,.usa-input-group input:disabled+.usa-input-suffix.usa-focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:hover,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:active,.usa-input-group input[aria-disabled=true]+.usa-input-suffix:focus,.usa-input-group input[aria-disabled=true]+.usa-input-suffix.usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input-group input:disabled,.usa-input-group input[aria-disabled=true]{border:0}}@media (forced-colors: active){.usa-input-group:has(input:disabled),.usa-input-group:has(input[aria-disabled=true]){border:2px solid GrayText}}.usa-input-prefix:has(+input:disabled),.usa-input-prefix:has(+input[aria-disabled=true]){color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-input-prefix:has(+input:disabled):hover,.usa-input-prefix:has(+input:disabled):active,.usa-input-prefix:has(+input:disabled):focus,.usa-input-prefix:has(+input:disabled).usa-focus,.usa-input-prefix:has(+input[aria-disabled=true]):hover,.usa-input-prefix:has(+input[aria-disabled=true]):active,.usa-input-prefix:has(+input[aria-disabled=true]):focus,.usa-input-prefix:has(+input[aria-disabled=true]).usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input-prefix:has(+input:disabled),.usa-input-prefix:has(+input[aria-disabled=true]){border:0;color:GrayText}.usa-input-prefix:has(+input:disabled):hover,.usa-input-prefix:has(+input:disabled):active,.usa-input-prefix:has(+input:disabled):focus,.usa-input-prefix:has(+input:disabled).usa-focus,.usa-input-prefix:has(+input[aria-disabled=true]):hover,.usa-input-prefix:has(+input[aria-disabled=true]):active,.usa-input-prefix:has(+input[aria-disabled=true]):focus,.usa-input-prefix:has(+input[aria-disabled=true]).usa-focus{color:GrayText}}.usa-input-prefix,.usa-input-suffix{position:absolute;color:#71767a;line-height:0;padding:0 0.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.usa-input-prefix .usa-icon,.usa-input-suffix .usa-icon{height:1.5rem;width:1.5rem}.usa-input-prefix+input{padding-left:2.5rem;padding-right:0.5rem}.usa-input-suffix{right:0}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-character-count__status{display:inline-block;padding-top:0.25rem}.usa-character-count__status.usa-character-count__status--invalid{color:#b50909;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""])){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""])[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""])){margin-left:-0.9rem}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""])[use-forms-pattern=multiple]){padding-left:0}}:host .usa-input--2xs{max-width:5ex}:host .usa-input--xs{max-width:9ex}:host .usa-input--sm,:host .usa-input--small{max-width:13ex}:host .usa-input--md,:host .usa-input--medium{max-width:20ex}:host .usa-input--lg{max-width:30ex}:host .usa-input--xl{max-width:40ex}:host .usa-input--2xl{max-width:50ex}:host{color:var(--vads-color-base)}:host{display:block;font-family:var(--font-source-sans)}input{-webkit-box-sizing:border-box;box-sizing:border-box}input.usa-input{color:var(--vads-color-base)}.usa-hint{display:block}.currency-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.currency-wrapper>div{position:absolute;left:10px}.currency-wrapper #symbol{margin-top:8px}.currency-wrapper #inputField{padding-left:25px}:host([error]:not([error=""])[show-input-error=false]){border-left:0;padding-left:0;margin-left:0}';Build.isTesting&&instance.init({lng:"cimode"});const VaTextInput=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.allowedInputTypes=["email","number","search","tel","text","url"],this.updatePaddingLeft=()=>{if(this.inputIconPrefix)this.paddingLeftValue="2.5rem";else if(this.inputPrefix){const e=this.inputPrefix?Math.min(this.inputPrefix.length,25):null;this.paddingLeftValue=.5*e+1+"rem"}},this.updatePaddingRight=()=>{const e=this.inputSuffix?Math.min(this.inputSuffix.length,25):null;this.paddingRightValue=.5*e+1+"rem"},this.handleInput=e=>{const i=e.target;this.value=i.value},this.handleBlur=e=>{if(this.enableAnalytics&&this.componentLibraryAnalytics.emit({componentName:"va-text-input",action:"blur",details:{label:this.label,value:this.value}}),"decimal"===this.inputmode||"numeric"===this.inputmode||this.currency){let i=instance.t("number-error");const t=e.target.checkValidity();this.error||t?this.error&&this.error===i&&t&&(this.error=null,this.el.setAttribute("error","")):(this.error=i,this.el.setAttribute("error",i))}},this.label=void 0,this.error=void 0,this.reflectInputError=!1,this.showInputError=!0,this.invalid=!1,this.required=!1,this.inputmode=void 0,this.step=void 0,this.type="text",this.maxlength=void 0,this.autocomplete=void 0,this.enableAnalytics=!1,this.name=void 0,this.pattern=void 0,this.hint=void 0,this.messageAriaDescribedby=void 0,this.value=void 0,this.success=!1,this.width=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.charcount=!1,this.currency=!1,this.inputPrefix=void 0,this.inputIconPrefix=void 0,this.inputSuffix=void 0,this.inputIconSuffix=void 0,this.min=void 0,this.max=void 0,this.paddingLeftValue="0",this.paddingRightValue="0"}componentWillLoad(){this.updatePaddingLeft(),this.updatePaddingRight()}componentDidUpdate(){this.updatePaddingLeft(),this.updatePaddingRight()}getInputType(){return this.allowedInputTypes.includes(this.type)?this.max||this.min?"number":this.type:(consoleDevError(`The input type "${this.type}" is invalid or unsupported!`),"text")}getMaxlength(){if(!(this.maxlength<=0))return this.maxlength;consoleDevError("The maxlength prop must be positive!")}getPattern(){return this.currency?"^[0-9]+(.[0-9]{2})?$":void 0!==this.pattern||"decimal"!==this.inputmode&&"numeric"!==this.inputmode?this.pattern:"[0-9]+(.[0-9]{1,})?"}getInputmode(){return this.currency?"numeric":this.inputmode?this.inputmode:void 0}getStep(){return this.step||"decimal"!==this.inputmode?this.step?this.step:void 0:".01"}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}render(){const{label:e,error:i,reflectInputError:t,showInputError:a,invalid:s,required:r,value:n,name:u,autocomplete:o,hint:p,handleInput:l,handleBlur:d,success:c,messageAriaDescribedby:m,width:f,useFormsPattern:g,formHeadingLevel:b,formHeading:x,charcount:v,min:y,max:w,currency:T,inputPrefix:I,inputIconPrefix:P,inputSuffix:z,inputIconSuffix:E}=this,S=this.getInputType(),H=this.getMaxlength(),k=this.getInputmode(),C=this.getStep(),L=`${m?"input-message":""} ${i?"input-error-message":""} ${v&&H?"charcount-message":""}`.trim()||null,R=`${g&&x?"form-question":""} ${g?"form-description":""} ${g&&e?"input-label":""}`.trim()||null,V=this.getPattern(),A=classnames({"currency-wrapper":T,"usa-input-group":z||I||P||E}),G=(()=>"0"!==this.paddingLeftValue&&I?{paddingLeft:this.paddingLeftValue}:z?{paddingRight:this.paddingRightValue}:{})(),_=H&&(null==n?void 0:n.length)>H,M=classnames({"usa-label":!0,"usa-label--error":i}),q=classnames({"usa-input":!0,"usa-input--success":c,"usa-input--error":i||t,[`usa-input--${f}`]:f}),$=classnames({"usa-hint":!0,"usa-character-count__status":H,"usa-character-count__status--invalid":H&&(null==n?void 0:n.length)>H}),N=classnames({"usa-sr-only":!a});let F=null;if("single"===g||"multiple"===g){const e=getHeaderLevel(b);F=h(Fragment,null,x&&h(e,{id:"form-question",part:"form-header"},x),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}return h(Host,null,F,h("div",{class:"input-wrap"},e&&h("label",{htmlFor:"inputField",id:"input-label",class:M,part:"label"},e,r&&h("span",{class:"usa-label--required"}," ",instance.t("required")),p&&h("span",{class:"usa-hint"},p)),h("slot",null),h("span",{id:"input-error-message",role:"alert",class:N},i&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},i))),h("div",{class:A},T&&h("div",{id:"symbol"},"$"),I&&h("div",{class:"usa-input-prefix",part:"input-prefix"},I.substring(0,25)),P&&h("div",{class:"usa-input-prefix",part:"input-prefix"},h("va-icon",{icon:P,size:3,part:"icon"})),h("input",{class:q,id:"inputField",type:S,value:n,onInput:l,onBlur:d,"aria-describedby":L,style:G,"aria-labelledby":R,"aria-invalid":s||i||_?"true":"false",inputmode:k,step:C,maxlength:H,pattern:V,name:u,autocomplete:o,required:r||null,part:"input",min:y,max:w}),z&&h("div",{class:"usa-input-suffix",part:"suffix","aria-hidden":"true"},z.substring(0,25)),E&&h("div",{class:"usa-input-suffix",part:"input-suffix"},h("va-icon",{icon:E,size:3,part:"icon"}))),m&&h("span",{id:"input-message",class:"usa-sr-only dd-privacy-hidden"},m),v&&H&&h("span",{id:"charcount-message",class:$,"aria-live":"polite"},getCharacterMessage(n,H))))}get el(){return this}static get style(){return vaTextInputCss}},[1,"va-text-input",{label:[1],error:[513],reflectInputError:[4,"reflect-input-error"],showInputError:[516,"show-input-error"],invalid:[4],required:[4],inputmode:[1],step:[1],type:[1],maxlength:[2],autocomplete:[1],enableAnalytics:[4,"enable-analytics"],name:[1],pattern:[1],hint:[1],messageAriaDescribedby:[1,"message-aria-describedby"],value:[1537],success:[4],width:[1],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],charcount:[4],currency:[4],inputPrefix:[1,"input-prefix"],inputIconPrefix:[1,"input-icon-prefix"],inputSuffix:[1,"input-suffix"],inputIconSuffix:[1,"input-icon-suffix"],min:[8],max:[8],paddingLeftValue:[32],paddingRightValue:[32]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-text-input","va-icon"].forEach((e=>{switch(e){case"va-text-input":customElements.get(e)||customElements.define(e,VaTextInput);break;case"va-icon":customElements.get(e)||defineCustomElement$1()}}))}export{VaTextInput as V,defineCustomElement as d};

package/dist/components/va-textarea.js

@@ -1 +1 @@
-import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import"./i18n-setup.js";import"./contacts.js";import{c as consoleDevError,b as getCharacterMessage,a as getHeaderLevel}from"./utils.js";import{i as instance}from"./i18next.js";const vaTextareaCss='button:not([disabled]):focus,:host([uswds=\'false\']) button:not([disabled]):active,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:0.87rem;line-height:1.1;font-weight:normal;letter-spacing:0.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:700}h6{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:0.9375rem}h6{font-size:0.9375rem}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}:host legend :is(h1,h2,h3,h4,h5,h6),:host label :is(h1,h2,h3,h4,h5,h6){display:inline;margin:0px}:host legend :is(h1,h2,h3,h4,h5),:host label :is(h1,h2,h3,h4,h5){font-family:var(--font-serif)}:host h1+*,:host h2+*,:host h3+*,:host h4+*,:host h5+*,:host h6+*{margin-top:unset}:host #form-question{margin-bottom:1rem}.usa-textarea,.usa-hint,.usa-input{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-textarea,.usa-input{border-width:1px;border-color:#565c65;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:0.5rem;max-width:30rem;padding:0.5rem;width:100%}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-input:disabled,.usa-input[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#454545}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:0;color:GrayText}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:2px solid GrayText}}.usa-input--error{border-width:0.25rem;border-color:#b50909;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input--success{border-width:0.25rem;border-color:#00a91c;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:0;color:GrayText}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:2px solid GrayText}}.usa-textarea{height:10rem}.usa-character-count__status{display:inline-block;padding-top:0.25rem}.usa-character-count__status.usa-character-count__status--invalid{color:#b50909;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""]):not([uswds=false])){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""]):not([uswds=false])){margin-left:-0.9rem}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){padding-left:0}}.usa-textarea{resize:inherit}:host{color:var(--vads-color-base);display:block;resize:both;font-family:var(--font-source-sans)}:host(:focus){outline:none !important}.usa-hint{display:block}';Build.isTesting&&instance.init({lng:"cimode"});const VaTextarea$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handleInput=e=>{const a=e.target;this.value=a.value},this.handleBlur=()=>{this.enableAnalytics&&this.value&&this.componentLibraryAnalytics.emit({componentName:"va-textarea",action:"blur",details:{label:this.label,value:this.value}})},this.label=void 0,this.error=void 0,this.placeholder=void 0,this.name=void 0,this.required=!1,this.hint=void 0,this.messageAriaDescribedby=void 0,this.maxlength=void 0,this.value=void 0,this.enableAnalytics=!1,this.labelHeaderLevel=void 0,this.headerAriaDescribedby=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.charcount=!1}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}getMaxlength(){if(!(this.maxlength<=0))return this.maxlength;consoleDevError("The maxlength prop must be positive!")}render(){const{label:e,error:a,placeholder:t,name:r,required:s,value:i,hint:o,charcount:n,messageAriaDescribedby:l,useFormsPattern:d,formHeadingLevel:u,headerAriaDescribedby:c,formHeading:m}=this,b=this.getMaxlength(),p=`${a?"input-error-message":""} ${n&&b?"charcount-message":""} ${l?"input-message":""}`.trim()||null,f=`${d&&m?"form-question":""} ${d?"form-description":""} ${d&&e?"input-label":""}`.trim()||null,g=getHeaderLevel(this.labelHeaderLevel),v=c?"header-message":null,x=n&&(null==i?void 0:i.length)>b,y=classnames({"usa-label":!0,"usa-label--error":a}),w=classnames({"usa-textarea":!0,"usa-input--error":a}),T=classnames({"usa-hint":!0,"usa-character-count__status":n,"usa-character-count__status--invalid":n&&b&&(null==i?void 0:i.length)>b});let H=null;if("single"===d||"multiple"===d){const e=getHeaderLevel(u);H=h(Fragment,null,m&&h(e,{id:"form-question",part:"form-header"},m),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}return h(Host,null,H,h("div",{class:"input-wrap"},e&&h("label",{htmlFor:"input-type-textarea",id:"input-label",class:y,part:"label"},g?h(g,{part:"header","aria-describedby":v},e):e," ","multiple"===d&&h("span",{id:"header-message",class:"usa-sr-only"},e),c&&h("span",{id:"header-message",class:"usa-sr-only"},c),s&&h("span",{class:"usa-label--required"},instance.t("required")),o&&h("div",{class:"usa-hint"},o)),h("slot",null),h("span",{id:"input-error-message",role:"alert"},a&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},a))),h("textarea",{class:w,"aria-describedby":p,"aria-invalid":a||x?"true":"false","aria-labelledby":f,onInput:this.handleInput,onBlur:this.handleBlur,id:"input-type-textarea",placeholder:t,name:r,maxLength:n?void 0:b,value:i,part:"input-type-textarea"}),!n&&b&&(null==i?void 0:i.length)>=b&&h("span",{class:T,"aria-live":"polite"},instance.t("max-chars",{length:b})),n&&b&&h("span",{id:"charcount-message",class:T,"aria-live":"polite"},getCharacterMessage(i,b)),l&&h("span",{id:"input-message",class:"usa-sr-only dd-privacy-hidden"},l)))}get el(){return this}static get style(){return vaTextareaCss}},[1,"va-textarea",{label:[1],error:[1],placeholder:[1],name:[1],required:[4],hint:[1],messageAriaDescribedby:[1,"message-aria-describedby"],maxlength:[2],value:[1537],enableAnalytics:[4,"enable-analytics"],labelHeaderLevel:[1,"label-header-level"],headerAriaDescribedby:[1,"header-aria-describedby"],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],charcount:[4]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-textarea"].forEach((e=>{"va-textarea"===e&&(customElements.get(e)||customElements.define(e,VaTextarea$1))}))}const VaTextarea=VaTextarea$1,defineCustomElement=defineCustomElement$1;export{VaTextarea,defineCustomElement};
+import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import"./i18n-setup.js";import"./contacts.js";import{c as consoleDevError,b as getCharacterMessage,a as getHeaderLevel}from"./utils.js";import{i as instance}from"./i18next.js";const vaTextareaCss='button:not([disabled]):focus,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:0.87rem;line-height:1.1;font-weight:normal;letter-spacing:0.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:700}h6{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:0.9375rem}h6{font-size:0.9375rem}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}:host legend :is(h1,h2,h3,h4,h5,h6),:host label :is(h1,h2,h3,h4,h5,h6){display:inline;margin:0px}:host legend :is(h1,h2,h3,h4,h5),:host label :is(h1,h2,h3,h4,h5){font-family:var(--font-serif)}:host h1+*,:host h2+*,:host h3+*,:host h4+*,:host h5+*,:host h6+*{margin-top:unset}:host #form-question{margin-bottom:1rem}.usa-textarea,.usa-hint,.usa-input{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-textarea,.usa-input{border-width:1px;border-color:#565c65;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:0.5rem;max-width:30rem;padding:0.5rem;width:100%}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-input:disabled,.usa-input[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#454545}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:0;color:GrayText}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:2px solid GrayText}}.usa-input--error{border-width:0.25rem;border-color:#b50909;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input--success{border-width:0.25rem;border-color:#00a91c;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:0;color:GrayText}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:2px solid GrayText}}.usa-textarea{height:10rem}.usa-character-count__status{display:inline-block;padding-top:0.25rem}.usa-character-count__status.usa-character-count__status--invalid{color:#b50909;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""])){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""])[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""])){margin-left:-0.9rem}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""])[use-forms-pattern=multiple]){padding-left:0}}.usa-textarea{resize:inherit}:host{color:var(--vads-color-base);display:block;resize:both;font-family:var(--font-source-sans)}:host(:focus){outline:none !important}.usa-hint{display:block}';Build.isTesting&&instance.init({lng:"cimode"});const VaTextarea$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handleInput=e=>{const a=e.target;this.value=a.value},this.handleBlur=()=>{this.enableAnalytics&&this.value&&this.componentLibraryAnalytics.emit({componentName:"va-textarea",action:"blur",details:{label:this.label,value:this.value}})},this.label=void 0,this.error=void 0,this.placeholder=void 0,this.name=void 0,this.required=!1,this.hint=void 0,this.messageAriaDescribedby=void 0,this.maxlength=void 0,this.value=void 0,this.enableAnalytics=!1,this.labelHeaderLevel=void 0,this.headerAriaDescribedby=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.charcount=!1}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}getMaxlength(){if(!(this.maxlength<=0))return this.maxlength;consoleDevError("The maxlength prop must be positive!")}render(){const{label:e,error:a,placeholder:t,name:r,required:i,value:s,hint:o,charcount:n,messageAriaDescribedby:l,useFormsPattern:d,formHeadingLevel:u,headerAriaDescribedby:c,formHeading:m}=this,b=this.getMaxlength(),p=`${a?"input-error-message":""} ${n&&b?"charcount-message":""} ${l?"input-message":""}`.trim()||null,f=`${d&&m?"form-question":""} ${d?"form-description":""} ${d&&e?"input-label":""}`.trim()||null,g=getHeaderLevel(this.labelHeaderLevel),v=c?"header-message":null,x=n&&(null==s?void 0:s.length)>b,y=classnames({"usa-label":!0,"usa-label--error":a}),w=classnames({"usa-textarea":!0,"usa-input--error":a}),T=classnames({"usa-hint":!0,"usa-character-count__status":n,"usa-character-count__status--invalid":n&&b&&(null==s?void 0:s.length)>b});let H=null;if("single"===d||"multiple"===d){const e=getHeaderLevel(u);H=h(Fragment,null,m&&h(e,{id:"form-question",part:"form-header"},m),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}return h(Host,null,H,h("div",{class:"input-wrap"},e&&h("label",{htmlFor:"input-type-textarea",id:"input-label",class:y,part:"label"},g?h(g,{part:"header","aria-describedby":v},e):e," ","multiple"===d&&h("span",{id:"header-message",class:"usa-sr-only"},e),c&&h("span",{id:"header-message",class:"usa-sr-only"},c),i&&h("span",{class:"usa-label--required"},instance.t("required")),o&&h("div",{class:"usa-hint"},o)),h("slot",null),h("span",{id:"input-error-message",role:"alert"},a&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},a))),h("textarea",{class:w,"aria-describedby":p,"aria-invalid":a||x?"true":"false","aria-labelledby":f,onInput:this.handleInput,onBlur:this.handleBlur,id:"input-type-textarea",placeholder:t,name:r,maxLength:n?void 0:b,value:s,part:"input-type-textarea"}),!n&&b&&(null==s?void 0:s.length)>=b&&h("span",{class:T,"aria-live":"polite"},instance.t("max-chars",{length:b})),n&&b&&h("span",{id:"charcount-message",class:T,"aria-live":"polite"},getCharacterMessage(s,b)),l&&h("span",{id:"input-message",class:"usa-sr-only dd-privacy-hidden"},l)))}get el(){return this}static get style(){return vaTextareaCss}},[1,"va-textarea",{label:[1],error:[1],placeholder:[1],name:[1],required:[4],hint:[1],messageAriaDescribedby:[1,"message-aria-describedby"],maxlength:[2],value:[1537],enableAnalytics:[4,"enable-analytics"],labelHeaderLevel:[1,"label-header-level"],headerAriaDescribedby:[1,"header-aria-describedby"],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],charcount:[4]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-textarea"].forEach((e=>{"va-textarea"===e&&(customElements.get(e)||customElements.define(e,VaTextarea$1))}))}const VaTextarea=VaTextarea$1,defineCustomElement=defineCustomElement$1;export{VaTextarea,defineCustomElement};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "46.0.2",
+  "version": "46.1.3",
   "license": "MIT",
   "scripts": {
     "build": "webpack"
@@ -16,7 +16,7 @@
   "module": "src/main.js",
   "dependencies": {
     "@department-of-veterans-affairs/react-components": "28.1.0",
-    "@department-of-veterans-affairs/web-components": "14.0.1",
+    "@department-of-veterans-affairs/web-components": "14.1.2",
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "react-focus-on": "^3.5.1",

package/dist/265.app.bundle.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_department_of_veterans_affairs_component_library=self.webpackChunk_department_of_veterans_affairs_component_library||[]).push([[265],{265:function(t,n,r){function e(t,n){var r=t.shadowRoot.querySelector("slot").assignedNodes();return null!==n?Array.from(r).filter((function(t){return t.nodeName.toLowerCase()===n})):Array.from(r)}function o(t){return 1===t?"":"s"}function a(t,n){if(void 0===t||""===t)return"".concat(n," character").concat(o(n)," allowed");var r;if(t.length<=n){var e=n-t.length;r="".concat(e," character").concat(o(e)," left")}else e=t.length-n,r="".concat(e," character").concat(o(e)," over limit");return r}function c(t,n){return Array.from({length:n-t+1},(function(n,r){return t+r}))}r.r(n),r.d(n,{S:function(){return f},a:function(){return s},b:function(){return a},g:function(){return e},m:function(){return c},s:function(){return i}});var u=function(t){return t&&"object"==typeof t&&1===t.nodeType};function i(t,n){var r=function(t,n){if("string"!=typeof t)return[];if(!n||!u(n))return[];var r=n.shadowRoot.querySelectorAll(t);return Array.from(r)}(t,n);return"string"!=typeof t||u(n)&&n.matches(t)&&r.push(n),r}var f={_entity:/[&<>"'/]/g,_entities:{"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&apos;","/":"&#x2F;"},getEntity:function(t){return f._entities[t]},escapeHTML:function(t){for(var n="",r=0;r<t.length;r++)if(n+=t[r],r+1<arguments.length){var e=arguments[r+1]||"";n+=String(e).replace(f._entity,f.getEntity)}return n}};function s(t){var n;return(n="string"==typeof t?parseInt(t,10):Math.floor(t))>=1&&n<=6?"h".concat(n):null}}}]);