@department-of-veterans-affairs/component-library 52.0.0 → 52.1.0

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

@@ -664,10 +664,6 @@ export namespace Components {
           * A comma-separated list of unique file type specifiers.
          */
         "accept"?: string;
-        /**
-          * The text displayed on the button.
-         */
-        "buttonText": string;
         /**
           * Emit component-library-analytics events on the file input change event.
          */
@@ -765,7 +761,7 @@ export namespace Components {
         /**
           * Array of booleans, displays file password field for corresponding file input.
          */
-        "encrypted": boolean[];
+        "encrypted"?: boolean[];
         /**
           * Array of error messages corresponding to each file input. The length and order match the files array.
          */
@@ -782,10 +778,26 @@ export namespace Components {
           * Label for the file input, displayed above the input.
          */
         "label"?: string;
+        /**
+          * Maximum allowed file size in bytes. The value is applied to all file inputs.
+         */
+        "maxFileSize"?: number;
+        /**
+          * Minimum allowed file size in bytes. The value is applied to all file inputs.
+         */
+        "minFileSize"?: number;
         /**
           * Name attribute for the file input element, used to identify the form data in the submission.
          */
         "name"?: string;
+        /**
+          * Array of password error messages corresponding to each file input. The length and order match the files array.
+         */
+        "passwordErrors"?: Array<string | null>;
+        /**
+          * Array of numbers corresponding to the progress of the upload of each file.
+         */
+        "percentUploaded"?: number[];
         /**
           * Optionally displays the read-only view
          */
@@ -794,10 +806,22 @@ export namespace Components {
           * If true, the file input is marked as required, and users must select a file.
          */
         "required"?: boolean;
+        /**
+          * Array of booleans corresponding to each file input - if true, resets component instance to initial visual state.
+         */
+        "resetVisualState"?: boolean[];
         /**
           * Optional, shows the additional info slot content only for indexes of file inputs provided. Defaults to `null` (show on all fields). ex: [1,3]
          */
         "slotFieldIndexes"?: Number[];
+        /**
+          * Optional file status, ex: "Uploading...", "Uploaded".
+         */
+        "statusText"?: string;
+        /**
+          * Array of objects representing a previously uploaded file. Example: `[{ name: string, type: string, size: number}]`
+         */
+        "uploadedFiles"?: UploadedFile[];
         /**
           * The value attribute for the file view element.
          */
@@ -2862,6 +2886,7 @@ declare global {
     interface HTMLVaFileInputElementEventMap {
         "vaChange": any;
         "vaPasswordChange": any;
+        "vaFileInputError": any;
         "component-library-analytics": any;
     }
     /**
@@ -4538,10 +4563,6 @@ declare namespace LocalJSX {
           * A comma-separated list of unique file type specifiers.
          */
         "accept"?: string;
-        /**
-          * The text displayed on the button.
-         */
-        "buttonText"?: string;
         /**
           * Emit component-library-analytics events on the file input change event.
          */
@@ -4590,6 +4611,10 @@ declare namespace LocalJSX {
           * The event emitted when the file input value changes.
          */
         "onVaChange"?: (event: VaFileInputCustomEvent<any>) => void;
+        /**
+          * The event emitted when adding a file results in an error, e.g. exceeding max file size
+         */
+        "onVaFileInputError"?: (event: VaFileInputCustomEvent<any>) => void;
         /**
           * The event emitted when the file input password value changes.
          */
@@ -4668,6 +4693,14 @@ declare namespace LocalJSX {
           * Label for the file input, displayed above the input.
          */
         "label"?: string;
+        /**
+          * Maximum allowed file size in bytes. The value is applied to all file inputs.
+         */
+        "maxFileSize"?: number;
+        /**
+          * Minimum allowed file size in bytes. The value is applied to all file inputs.
+         */
+        "minFileSize"?: number;
         /**
           * Name attribute for the file input element, used to identify the form data in the submission.
          */
@@ -4676,6 +4709,14 @@ declare namespace LocalJSX {
           * Event emitted when any change to the file inputs occurs.  Sends back an object with the following data structure: `{ action: string, file: triggering file, state: files array }`  The action will be `'FILE_ADDED'`, `'FILE UPDATED'` or `'FILE_REMOVED'`
          */
         "onVaMultipleChange"?: (event: VaFileInputMultipleCustomEvent<any>) => void;
+        /**
+          * Array of password error messages corresponding to each file input. The length and order match the files array.
+         */
+        "passwordErrors"?: Array<string | null>;
+        /**
+          * Array of numbers corresponding to the progress of the upload of each file.
+         */
+        "percentUploaded"?: number[];
         /**
           * Optionally displays the read-only view
          */
@@ -4684,10 +4725,22 @@ declare namespace LocalJSX {
           * If true, the file input is marked as required, and users must select a file.
          */
         "required"?: boolean;
+        /**
+          * Array of booleans corresponding to each file input - if true, resets component instance to initial visual state.
+         */
+        "resetVisualState"?: boolean[];
         /**
           * Optional, shows the additional info slot content only for indexes of file inputs provided. Defaults to `null` (show on all fields). ex: [1,3]
          */
         "slotFieldIndexes"?: Number[];
+        /**
+          * Optional file status, ex: "Uploading...", "Uploaded".
+         */
+        "statusText"?: string;
+        /**
+          * Array of objects representing a previously uploaded file. Example: `[{ name: string, type: string, size: number}]`
+         */
+        "uploadedFiles"?: UploadedFile[];
         /**
           * The value attribute for the file view element.
          */

package/dist/components/va-file-input-multiple.js

@@ -1 +1 @@
-import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import"./i18n-setup.js";import"./contacts.js";import{d as defineCustomElement$9}from"./va-button2.js";import{d as defineCustomElement$8}from"./va-button-icon2.js";import{d as defineCustomElement$7}from"./va-card2.js";import{d as defineCustomElement$6}from"./va-file-input2.js";import{d as defineCustomElement$5}from"./va-icon2.js";import{d as defineCustomElement$4}from"./va-modal2.js";import{d as defineCustomElement$3}from"./va-progress-bar2.js";import{d as defineCustomElement$2}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const vaFileInputMultipleCss='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,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}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 Web", "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}@import \'~@department-of-veterans-affairs/css-library/dist/stylesheets/base/headings.css\';: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{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.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-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;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}}[hidden]{display:none}:host{display:block;font-family:var(--font-source-sans);font-size:16.96px;}:host .label-header{color:var(--vads-color-base);font-weight:var(--font-weight-normal)}:host .label-header-tag{margin:0;display:inline-block}:host .file-input-wrapper{display:block;max-width:30rem;width:100%;position:relative;margin:8px 0}:host .file-input{cursor:pointer;height:100%;width:100%;max-width:none;top:0;left:0;z-index:1;margin:0;position:absolute;text-indent:-999em;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target{border:1px dashed var(--vads-color-action-border-base-active-on-dark);display:block;margin-top:0.3125rem;position:relative;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target.file-input-target-error{border:2px dashed var(--vads-color-secondary-dark)}:host .file-input-box{background:var(--vads-color-white);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:2}:host .file-input-instructions{font-size:1.06rem;padding:1.25rem 0.625rem;pointer-events:none;position:relative;z-index:3}:host .file-input-choose-text{color:var(--vads-color-link);text-decoration:underline;font-weight:var(--font-weight-normal)}:host .file-icon{color:var(--vads-color-primary-alt-darkest)}:host .selected-files-wrapper{background-color:var(--vads-color-primary-lighter);border:1px solid var(--vads-color-base-light)}:host .selected-files-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;border-bottom:1px solid var(--vads-color-white);margin-bottom:8px;padding:8px}:host .va-card{margin:8px}:host .file-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;padding:0 8px;display:block;width:100%;word-wrap:break-word;word-break:break-word;overflow:hidden}:host #input-error-message{padding:0 8px;width:100%}:host .file-size-label,:host .file-status-label{color:var(--vads-color-base-dark);font-weight:var(--font-weight-normal);font-size:1.06rem;padding:0 8px;display:block}:host .file-status-label{font-style:italic}:host .file-info-section{padding:0 8px 8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .file-button-section{margin-top:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row}:host .file-button-section>va-button-icon{font-size:1.06rem}@media screen and (max-width: 320px){:host .file-button-section{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}:host .separator{border:0;border-top:1px solid var(--vads-color-base-lighter);margin:0}:host .vads-u-line-height--2{line-height:1.15}:host .thumbnail-container{height:40px;width:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .thumbnail-preview{max-width:40px;width:auto;max-height:40px;height:auto}:host .thumbnail-error{color:#b21d38}:host va-progress-bar{font-size:var(--vads-font-size-root);display:block;margin-left:16px}:host .uploading-status{font-style:var(--font-style-italic)}:host(.has-error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host(.has-error){margin-left:-0.9rem}}.required{color:var(--vads-color-secondary-dark);margin-left:0.25rem}h1 .required,h2 .required,h3 .required,h4 .required,h5 .required,h6 .required{font-family:var(--font-source-sans);font-size:initial;font-weight:initial}.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.has-error{border-left:0.25rem solid #b50909;padding-left:1rem}:host .outer-wrap{background-color:var(--vads-color-primary-lighter);border:1px solid var(--vads-color-base-light);display:block;max-width:30rem;width:100%;position:relative;margin:8px 0}:host va-file-input.no-file{margin:0 8px}:host va-file-input:not(:last-child){border-bottom:1px solid var(--vads-color-white)}:host va-file-input.has-error{border-left:none;padding-left:0}@media screen and (min-width: 1008px){:host va-file-input.has-error{margin-left:0}}',VaFileInputMultipleStyle0=vaFileInputMultipleCss,VaFileInputMultiple$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaMultipleChange=createEvent(this,"vaMultipleChange",7),this.fileKeyCounter=0,this.additionalSlot=null,this.getAdditionalFileUploadMessage=()=>h("span",null,"Drag an additional file here or"," ",h("span",{class:"file-input-choose-text"},"choose from folder")),this.renderLabelOrHeader=(e,t,i)=>{const o=t?h("span",{class:"required"}," ",instance.t("required")):null;return i&&i>=1&&i<=6?h("div",{class:"label-header"},h(`h${i}`,{htmlFor:"fileInputField",part:"label",class:"label-header-tag"},e,o)):h("div",{class:"label-header"},h("span",{part:"label",class:"usa-label"},e),o)},this.addValueFiles=async()=>(this.files.shift(),this.value.forEach((e=>{this.files.push({file:e,key:this.fileKeyCounter,content:this.getAdditionalContent()||null}),this.fileKeyCounter++})),this.readOnly||this.files.push({file:null,key:this.fileKeyCounter,content:null}),this.valueAdded=!0,Promise.resolve()),this.hasErrors=()=>this.errors.some((e=>!!e)),this.label=void 0,this.name=void 0,this.required=!1,this.accept=void 0,this.errors=[],this.encrypted=[],this.hint=void 0,this.enableAnalytics=!1,this.headerSize=void 0,this.value=void 0,this.readOnly=!1,this.slotFieldIndexes=null,this.files=[{key:0,file:null,content:null}],this.valueAdded=!1}findFileByKey(e){return this.files.find((t=>t.key===e))}findIndexByKey(e){return this.files.indexOf(this.files.find((t=>t.key===e)))}isEmpty(){return null===this.files[0].file}setSlotContent(){const e=this.el.shadowRoot.querySelector("slot");this.additionalSlot||(this.additionalSlot=e?e.assignedElements({flatten:!0}):[]),null==e||e.remove()}getAdditionalContent(){return this.additionalSlot&&this.additionalSlot.map((e=>e.cloneNode(!0)))}handleChange(e,t,i){const o=e.detail.files[0];let s,r,a;if(o){const e=this.findFileByKey(t);e.file?(r="FILE_UPDATED",a=o,e.file=o):(r="FILE_ADDED",a=o,e.file=o,e.content=this.getAdditionalContent(),this.fileKeyCounter++,this.files.push({file:null,key:this.fileKeyCounter,content:null})),s=this.buildFilesArray(this.files,!1,this.findIndexByKey(t))}else{r="FILE_REMOVED",a=this.files[i].file,this.files.splice(i,1);const e=this.el.shadowRoot.querySelector("#statusMessage");e.textContent="",setTimeout((()=>{e.textContent="File deleted."}),1e3),s=this.buildFilesArray(this.files,!0)}const n={action:r,file:a,state:s};this.vaMultipleChange.emit(n),this.files=Array.of(...this.files)}handlePasswordChange(e,t){const i=this.findFileByKey(t);i.password=e.detail.password;const o=this.buildFilesArray(this.files,!1,this.findIndexByKey(t)),s={action:"PASSWORD_UPDATE",file:i.file,state:o};this.vaMultipleChange.emit(s)}buildFilesArray(e,t,i){let o=e.filter((e=>!!e.file)).map((e=>({file:e.file,changed:!1,password:e.password})));return!t&&o[i]&&(o[i].changed=!0),o}componentDidRender(){const e=this.el.shadowRoot.querySelectorAll("va-file-input");return this.setSlotContent(),e.forEach(((e,t)=>{!this.files[t].content||this.slotFieldIndexes&&!this.slotFieldIndexes.includes(t)||this.files[t].content.forEach((t=>e.append(t)))})),this.value&&this.value.length&&!this.valueAdded?this.addValueFiles():Promise.resolve()}render(){const{label:e,required:t,headerSize:i,hint:o,files:s,name:r,accept:a,errors:n,encrypted:l,enableAnalytics:d,readOnly:m}=this,f=this.isEmpty()?"":"outer-wrap",u=this.hasErrors()?"has-error":"";return h(Host,{key:"13551cea4699206cbe4c51e9994bd5c5b6c6742f",class:u},e&&!m&&this.renderLabelOrHeader(e,t,i),o&&!m&&h("div",{key:"14fa2cab4263419667c3a009ce789332ec5ae36e",class:"usa-hint",id:"input-hint-message"},o),h("div",{key:"5e28d8f95fe8807e250718f7fe343f04a511c1f3",class:f},h("div",{key:"87fa8218f283d456d56c133cc70ef58bfce345f2",class:"usa-sr-only","aria-live":"polite",id:"statusMessage"}),!this.isEmpty()&&h("div",{key:"324b65ad6f8c32199dbf1e4d452d4810702df9a7",class:"selected-files-label"},m?"Files you uploaded":"Selected files"),s.map(((i,s)=>h("va-file-input",Object.assign({key:i.key,headless:!0,label:e,hint:o,name:`${r}-${i.key}`,accept:a,required:t},s>0?{uploadMessage:this.getAdditionalFileUploadMessage()}:{},{error:n[s],encrypted:l[s],onVaChange:e=>this.handleChange(e,i.key,s),onVaPasswordChange:e=>this.handlePasswordChange(e,i.key),"enable-analytics":d,value:i.file,readOnly:m,class:i.file?"has-file":"no-file"}))))),h("slot",{key:"456f56642e917ba69d85b7819bf435d18e5707e6"}))}get el(){return this}static get style(){return VaFileInputMultipleStyle0}},[1,"va-file-input-multiple",{label:[1],name:[1],required:[4],accept:[1],errors:[16],encrypted:[16],hint:[1],enableAnalytics:[4,"enable-analytics"],headerSize:[2,"header-size"],value:[16],readOnly:[4,"read-only"],slotFieldIndexes:[16],files:[32],valueAdded:[32]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-file-input-multiple","va-button","va-button-icon","va-card","va-file-input","va-icon","va-modal","va-progress-bar","va-text-input"].forEach((e=>{switch(e){case"va-file-input-multiple":customElements.get(e)||customElements.define(e,VaFileInputMultiple$1);break;case"va-button":customElements.get(e)||defineCustomElement$9();break;case"va-button-icon":customElements.get(e)||defineCustomElement$8();break;case"va-card":customElements.get(e)||defineCustomElement$7();break;case"va-file-input":customElements.get(e)||defineCustomElement$6();break;case"va-icon":customElements.get(e)||defineCustomElement$5();break;case"va-modal":customElements.get(e)||defineCustomElement$4();break;case"va-progress-bar":customElements.get(e)||defineCustomElement$3();break;case"va-text-input":customElements.get(e)||defineCustomElement$2()}}))}const VaFileInputMultiple=VaFileInputMultiple$1,defineCustomElement=defineCustomElement$1;export{VaFileInputMultiple,defineCustomElement};
+import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import"./i18n-setup.js";import"./contacts.js";import{d as defineCustomElement$9}from"./va-button2.js";import{d as defineCustomElement$8}from"./va-button-icon2.js";import{d as defineCustomElement$7}from"./va-card2.js";import{d as defineCustomElement$6}from"./va-file-input2.js";import{d as defineCustomElement$5}from"./va-icon2.js";import{d as defineCustomElement$4}from"./va-modal2.js";import{d as defineCustomElement$3}from"./va-progress-bar2.js";import{d as defineCustomElement$2}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const vaFileInputMultipleCss='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,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}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 Web", "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}@import \'~@department-of-veterans-affairs/css-library/dist/stylesheets/base/headings.css\';: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{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.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-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;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}}[hidden]{display:none}:host{display:block;font-family:var(--font-source-sans);font-size:16.96px;}:host .label-header{color:var(--vads-color-base);font-weight:var(--font-weight-normal)}:host .label-header-tag{margin:0;display:inline-block}:host .file-input-wrapper{display:block;max-width:30rem;width:100%;position:relative;margin:8px 0}:host .file-input{cursor:pointer;height:100%;width:100%;max-width:none;top:0;left:0;z-index:1;margin:0;position:absolute;text-indent:-999em;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target{border:1px dashed var(--vads-color-action-border-base-active-on-dark);display:block;margin-top:0.3125rem;position:relative;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target.file-input-target-error{border:2px dashed var(--vads-color-secondary-dark)}:host .file-input-box{background:var(--vads-color-white);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:2}:host .file-input-instructions{font-size:1.06rem;padding:1.25rem 0.625rem;pointer-events:none;position:relative;z-index:3}:host .file-input-choose-text{color:var(--vads-color-link);text-decoration:underline;font-weight:var(--font-weight-normal)}:host .file-icon{color:var(--vads-color-primary-alt-darkest)}:host .selected-files-wrapper{background-color:var(--vads-color-primary-lighter);border:1px solid var(--vads-color-base-light)}:host .selected-files-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;border-bottom:1px solid var(--vads-color-white);margin-bottom:8px;padding:8px}:host .va-card{margin:8px}:host .file-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;padding:0 8px;display:block;width:100%;word-wrap:break-word;word-break:break-word;overflow:hidden}:host #input-error-message{padding:0 8px;width:100%}:host .file-size-label,:host .file-status-label{color:var(--vads-color-base-dark);font-weight:var(--font-weight-normal);font-size:1.06rem;padding:0 8px;display:block}:host .file-status-label{font-style:italic}:host .file-info-section{padding:0 8px 8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .file-button-section{margin-top:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row}:host .file-button-section>va-button-icon{font-size:1.06rem}@media screen and (max-width: 320px){:host .file-button-section{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}:host .separator{border:0;border-top:1px solid var(--vads-color-base-lighter);margin:0}:host .vads-u-line-height--2{line-height:1.15}:host .thumbnail-container{height:40px;width:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .thumbnail-preview{max-width:40px;width:auto;max-height:40px;height:auto}:host .thumbnail-error{color:#b21d38}:host va-progress-bar{font-size:var(--vads-font-size-root);display:block;margin-left:16px}:host .uploading-status{font-style:var(--font-style-italic)}:host(.has-error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host(.has-error){margin-left:-0.9rem}}.required{color:var(--vads-color-secondary-dark);margin-left:0.25rem}h1 .required,h2 .required,h3 .required,h4 .required,h5 .required,h6 .required{font-family:var(--font-source-sans);font-size:initial;font-weight:initial}.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.has-error{border-left:0.25rem solid #b50909;padding-left:1rem}:host .outer-wrap{background-color:var(--vads-color-primary-lighter);border:1px solid var(--vads-color-base-light);display:block;max-width:30rem;width:100%;position:relative;margin:8px 0}:host va-file-input.no-file{margin:0 8px}:host va-file-input:not(:last-child){border-bottom:1px solid var(--vads-color-white)}:host va-file-input.has-error{border-left:none;padding-left:0}@media screen and (min-width: 1008px){:host va-file-input.has-error{margin-left:0}}',VaFileInputMultipleStyle0=vaFileInputMultipleCss,VaFileInputMultiple$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaMultipleChange=createEvent(this,"vaMultipleChange",7),this.fileKeyCounter=0,this.additionalSlot=null,this.getAdditionalFileUploadMessage=()=>h("span",null,"Drag an additional file here or"," ",h("span",{class:"file-input-choose-text"},"choose from folder")),this.renderLabelOrHeader=(e,t,i)=>{const s=t?h("span",{class:"required"}," ",instance.t("required")):null;return i&&i>=1&&i<=6?h("div",{class:"label-header"},h(`h${i}`,{htmlFor:"fileInputField",part:"label",class:"label-header-tag"},e,s)):h("div",{class:"label-header"},h("span",{part:"label",class:"usa-label"},e),s)},this.addValueFiles=async()=>(this.files.shift(),this.value.forEach((e=>{this.files.push({file:e,key:this.fileKeyCounter,content:this.getAdditionalContent()||null}),this.fileKeyCounter++})),this.readOnly||this.files.push({file:null,key:this.fileKeyCounter,content:null}),this.valueAdded=!0,Promise.resolve()),this.hasErrors=()=>this.errors.some((e=>!!e)),this.label=void 0,this.name=void 0,this.required=!1,this.accept=void 0,this.errors=[],this.resetVisualState=[],this.passwordErrors=[],this.encrypted=[],this.hint=void 0,this.enableAnalytics=!1,this.headerSize=void 0,this.value=void 0,this.readOnly=!1,this.slotFieldIndexes=null,this.percentUploaded=[],this.maxFileSize=1/0,this.minFileSize=0,this.statusText=void 0,this.uploadedFiles=void 0,this.files=[{key:0,file:null,content:null}],this.valueAdded=!1}findFileByKey(e){return this.files.find((t=>t.key===e))}findIndexByKey(e){return this.files.indexOf(this.files.find((t=>t.key===e)))}isEmpty(){return null===this.files[0].file}setSlotContent(){const e=this.el.shadowRoot.querySelector("slot");this.additionalSlot||(this.additionalSlot=e?e.assignedElements({flatten:!0}):[]),null==e||e.remove()}getAdditionalContent(){return this.additionalSlot&&this.additionalSlot.map((e=>e.cloneNode(!0)))}handleChange(e,t,i){const s=e.detail.files[0];let o,r,a;if(s){const e=this.findFileByKey(t);e.file?(r="FILE_UPDATED",a=s,e.file=s):(r="FILE_ADDED",a=s,e.file=s,e.content=this.getAdditionalContent(),this.fileKeyCounter++,this.files.push({file:null,key:this.fileKeyCounter,content:null})),o=this.buildFilesArray(this.files,!1,this.findIndexByKey(t))}else{r="FILE_REMOVED",a=this.files[i].file,this.files.splice(i,1);const e=this.el.shadowRoot.querySelector("#statusMessage");e.textContent="",setTimeout((()=>{e.textContent="File deleted."}),1e3),o=this.buildFilesArray(this.files,!0)}const n={action:r,file:a,state:o};this.vaMultipleChange.emit(n),this.files=Array.of(...this.files)}handlePasswordChange(e,t){const i=this.findFileByKey(t);i.password=e.detail.password;const s=this.buildFilesArray(this.files,!1,this.findIndexByKey(t)),o={action:"PASSWORD_UPDATE",file:i.file,state:s};this.vaMultipleChange.emit(o)}buildFilesArray(e,t,i){let s=e.filter((e=>!!e.file)).map((e=>({file:e.file,changed:!1,password:e.password})));return!t&&s[i]&&(s[i].changed=!0),s}componentDidRender(){const e=this.el.shadowRoot.querySelectorAll("va-file-input");return this.setSlotContent(),e.forEach(((e,t)=>{!this.files[t].content||this.slotFieldIndexes&&!this.slotFieldIndexes.includes(t)||this.files[t].content.forEach((t=>e.append(t)))})),this.value&&this.value.length&&!this.valueAdded?this.addValueFiles():Promise.resolve()}render(){const{label:e,required:t,headerSize:i,hint:s,files:o,name:r,accept:a,errors:n,encrypted:l,percentUploaded:d,resetVisualState:m,passwordErrors:f,enableAnalytics:u,readOnly:p,maxFileSize:c,minFileSize:b,statusText:g,uploadedFiles:v}=this,x=this.isEmpty()?"":"outer-wrap",y=this.hasErrors()?"has-error":"";return h(Host,{key:"3dc516a236a33dfbc9f5b8b758217ca74db469f8",class:y,error:y?"error":""},e&&!p&&this.renderLabelOrHeader(e,t,i),s&&!p&&h("div",{key:"4fd99dfa200e76634ccb96d813d32f8019c84005",class:"usa-hint",id:"input-hint-message"},s),h("div",{key:"9837e22074958047802a04ebb1aec9d6823440e4",class:x},h("div",{key:"fbd861906c27008cf0ce1d2475a784d65eee048d",class:"usa-sr-only","aria-live":"polite",id:"statusMessage"}),!this.isEmpty()&&h("div",{key:"1afe5e9bc08e5edb728199550f8fece4e5e94bd6",class:"selected-files-label"},p?"Files you uploaded":"Selected files"),o.map(((i,o)=>{const x=m&&m.length>=o?m[o]:null,y=d&&d.length>=o?d[o]:null,w=f&&f.length>=o?f[o]:null,E=v&&v.length>=o?v[o]:null;return h("va-file-input",Object.assign({key:i.key,id:`instance-${o}`,headless:!0,label:e,hint:s,name:`${r}-${i.key}`,accept:a,required:t},o>0?{uploadMessage:this.getAdditionalFileUploadMessage()}:{},{error:n[o],encrypted:l[o],percentUploaded:y,resetVisualState:x,passwordError:w,onVaChange:e=>this.handleChange(e,i.key,o),onVaPasswordChange:e=>this.handlePasswordChange(e,i.key),"enable-analytics":u,value:i.file,readOnly:p,maxFileSize:c,minFileSize:b,statusText:g,uploadedFile:E,class:i.file?"has-file":"no-file","max-file-size":c,"min-file-size":b}))}))),h("slot",{key:"c6d7ba29dc7feeeb446d631cbc4b6d62f8f65048"}))}get el(){return this}static get style(){return VaFileInputMultipleStyle0}},[1,"va-file-input-multiple",{label:[1],name:[1],required:[4],accept:[1],errors:[16],resetVisualState:[16],passwordErrors:[16],encrypted:[16],hint:[1],enableAnalytics:[4,"enable-analytics"],headerSize:[2,"header-size"],value:[16],readOnly:[4,"read-only"],slotFieldIndexes:[16],percentUploaded:[16],maxFileSize:[2,"max-file-size"],minFileSize:[2,"min-file-size"],statusText:[1,"status-text"],uploadedFiles:[16],files:[32],valueAdded:[32]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-file-input-multiple","va-button","va-button-icon","va-card","va-file-input","va-icon","va-modal","va-progress-bar","va-text-input"].forEach((e=>{switch(e){case"va-file-input-multiple":customElements.get(e)||customElements.define(e,VaFileInputMultiple$1);break;case"va-button":customElements.get(e)||defineCustomElement$9();break;case"va-button-icon":customElements.get(e)||defineCustomElement$8();break;case"va-card":customElements.get(e)||defineCustomElement$7();break;case"va-file-input":customElements.get(e)||defineCustomElement$6();break;case"va-icon":customElements.get(e)||defineCustomElement$5();break;case"va-modal":customElements.get(e)||defineCustomElement$4();break;case"va-progress-bar":customElements.get(e)||defineCustomElement$3();break;case"va-text-input":customElements.get(e)||defineCustomElement$2()}}))}const VaFileInputMultiple=VaFileInputMultiple$1,defineCustomElement=defineCustomElement$1;export{VaFileInputMultiple,defineCustomElement};

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

@@ -1 +1 @@
-import{proxyCustomElement,HTMLElement,createEvent,h,forceUpdate,Host,Fragment}from"@stencil/core/internal/client";import"./i18n-setup.js";import"./contacts.js";import{s as selectOrMatches,S as Sanitizer}from"./utils.js";import{d as defineCustomElement$7}from"./va-button2.js";import{d as defineCustomElement$6}from"./va-button-icon2.js";import{d as defineCustomElement$5}from"./va-card2.js";import{d as defineCustomElement$4}from"./va-icon2.js";import{d as defineCustomElement$3}from"./va-modal2.js";import{d as defineCustomElement$2}from"./va-progress-bar2.js";import{d as defineCustomElement$1}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const PREFIX="usa",DROPZONE_CLASS="usa-file-input",DROPZONE=`.${DROPZONE_CLASS}`,INPUT_CLASS="usa-file-input__input",TARGET_CLASS="usa-file-input__target",INPUT=`.${INPUT_CLASS}`,BOX_CLASS="usa-file-input__box",INSTRUCTIONS_CLASS="usa-file-input__instructions",PREVIEW_CLASS="usa-file-input__preview",PREVIEW_HEADING_CLASS="usa-file-input__preview-heading",DISABLED_CLASS="usa-file-input--disabled",CHOOSE_CLASS="usa-file-input__choose",ACCEPTED_FILE_MESSAGE_CLASS="usa-file-input__accepted-files-message",DRAG_TEXT_CLASS="usa-file-input__drag-text",DRAG_CLASS="usa-file-input--drag",LOADING_CLASS="is-loading",INVALID_FILE_CLASS="has-invalid-file",GENERIC_PREVIEW_CLASS_NAME="usa-file-input__preview-image",GENERIC_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--generic`,PDF_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--pdf`,WORD_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--word`,VIDEO_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--video`,EXCEL_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--excel`,SR_ONLY_CLASS="usa-sr-only",SPACER_GIF="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";let TYPE_IS_VALID=Boolean(!0),DEFAULT_ARIA_LABEL_TEXT="",DEFAULT_FILE_STATUS_TEXT="";const getFileInputContext=e=>{const t=e.closest(DROPZONE);if(!t)throw new Error(`Element is missing outer ${DROPZONE}`);const i=t.querySelector(INPUT);return{dropZoneEl:t,inputEl:i}},disable=e=>{const{dropZoneEl:t,inputEl:i}=getFileInputContext(e);i.disabled=!0,t.classList.add(DISABLED_CLASS)},ariaDisable=e=>{const{dropZoneEl:t}=getFileInputContext(e);t.classList.add(DISABLED_CLASS)},enable=e=>{const{dropZoneEl:t,inputEl:i}=getFileInputContext(e);i.disabled=!1,t.classList.remove(DISABLED_CLASS),t.removeAttribute("aria-disabled")},replaceName=e=>{const t=e.charCodeAt(0);return 32===t?"-":t>=65&&t<=90?`img_${e.toLowerCase()}`:`__000${t.toString(16).slice(-4)}`},makeSafeForID=e=>e.replace(/[^a-z0-9]/g,replaceName),createUniqueID=e=>`${e}-${Math.floor(Date.now()/1e3)}`,getItemsLabel=e=>e.hasAttribute("multiple")?"files":"file",createTargetArea=e=>{const t=document.createElement("div"),i=document.createElement("div"),a=document.createElement("div");return e.classList.remove(DROPZONE_CLASS),e.classList.add(INPUT_CLASS),t.classList.add(DROPZONE_CLASS),a.classList.add(BOX_CLASS),i.classList.add(TARGET_CLASS),i.prepend(a),e.parentNode.insertBefore(i,e),e.parentNode.insertBefore(t,i),i.appendChild(e),t.appendChild(i),i},createVisibleInstructions=e=>{const t=e.closest(DROPZONE),i=getItemsLabel(e),a=document.createElement("div"),s=`Drag ${i} here or`,r="choose from folder";return DEFAULT_ARIA_LABEL_TEXT=`${s} ${r}`,a.classList.add(INSTRUCTIONS_CLASS),a.setAttribute("aria-hidden","true"),e.setAttribute("aria-label",DEFAULT_ARIA_LABEL_TEXT),a.innerHTML=Sanitizer.escapeHTML(`<span class="${DRAG_TEXT_CLASS}">${s}</span> <span class="${CHOOSE_CLASS}">${r}</span>`),e.parentNode.insertBefore(a,e),(/rv:11.0/i.test(navigator.userAgent)||/Edge\/\d./i.test(navigator.userAgent))&&(t.querySelector(`.${DRAG_TEXT_CLASS}`).outerHTML=""),a},createSROnlyStatus=e=>{const t=document.createElement("div"),i=getItemsLabel(e),a=e.closest(DROPZONE),s=e.closest(`.${TARGET_CLASS}`);DEFAULT_FILE_STATUS_TEXT=`No ${i} selected.`,t.classList.add("usa-sr-only"),t.setAttribute("aria-live","polite"),t.textContent=DEFAULT_FILE_STATUS_TEXT,a.insertBefore(t,s)},enhanceFileInput=e=>{const t=e.hasAttribute("aria-disabled")||e.hasAttribute("disabled"),i=createTargetArea(e),a=createVisibleInstructions(e),{dropZoneEl:s}=getFileInputContext(e);return t?s.classList.add(DISABLED_CLASS):createSROnlyStatus(e),{instructions:a,dropTarget:i}},removeOldPreviews=(e,t)=>{const i=e.querySelectorAll(`.${PREVIEW_CLASS}`),a=e.querySelector(`.${PREVIEW_HEADING_CLASS}`),s=e.querySelector(`.${ACCEPTED_FILE_MESSAGE_CLASS}`);a&&(a.outerHTML=""),s&&(s.outerHTML="",e.classList.remove("has-invalid-file")),null!==i&&(t&&t.removeAttribute("hidden"),Array.prototype.forEach.call(i,(e=>{e.parentNode.removeChild(e)})))},updateStatusMessage=(e,t,i)=>{const a=e;let s=DEFAULT_FILE_STATUS_TEXT;1===t.length?s=`You have selected the file: ${i}`:t.length>1&&(s=`You have selected ${t.length} files: ${i.join(", ")}`),setTimeout((()=>{a.textContent=s}),1e3)},addPreviewHeading=(e,t)=>{const i=document.createElement("div"),a=e.closest(`.${TARGET_CLASS}`),s=a.querySelector(`.${INSTRUCTIONS_CLASS}`);let r="Change file",o="";1===t.length?o=Sanitizer.escapeHTML(`Selected file <span class="usa-file-input__choose">${r}</span>`):t.length>1&&(r="Change files",o=Sanitizer.escapeHTML(`${t.length} files selected <span class="usa-file-input__choose">${r}</span>`)),s.setAttribute("hidden","true"),i.classList.add(PREVIEW_HEADING_CLASS),i.innerHTML=o,a.insertBefore(i,s),e.setAttribute("aria-label",r)},handleChange=(e,t,i,a)=>{const s=t.getAttribute("multiple")?e.target.files:[e.target.files[0]],r=a.closest(`.${DROPZONE_CLASS}`).querySelector(".usa-sr-only"),o=[];removeOldPreviews(a,i);for(let e=0;e<s.length;e+=1){const t=new FileReader,r=s[e].name;let n;o.push(r),t.onloadstart=function(){n=createUniqueID(makeSafeForID(r)),i.insertAdjacentHTML("afterend",Sanitizer.escapeHTML(`<div class="${PREVIEW_CLASS}" aria-hidden="true">\n          <img id="${n}" src="${SPACER_GIF}" alt="" class="${GENERIC_PREVIEW_CLASS_NAME} is-loading"/>${r}\n        <div>`))},t.onloadend=function(){const e=a.querySelector(`#${n}`);r.indexOf(".pdf")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${PDF_PREVIEW_CLASS}")`):r.indexOf(".doc")>0||r.indexOf(".pages")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${WORD_PREVIEW_CLASS}")`):r.indexOf(".xls")>0||r.indexOf(".numbers")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${EXCEL_PREVIEW_CLASS}")`):r.indexOf(".mov")>0||r.indexOf(".mp4")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${VIDEO_PREVIEW_CLASS}")`):e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${GENERIC_PREVIEW_CLASS}")`),e.classList.remove("is-loading"),e.src=t.result},s[e]&&t.readAsDataURL(s[e])}0===s.length?t.setAttribute("aria-label",DEFAULT_ARIA_LABEL_TEXT):addPreviewHeading(t,s),updateStatusMessage(r,s,o)},preventInvalidFiles=(e,t,i,a)=>{const s=t.getAttribute("accept");a.classList.remove("has-invalid-file");const r=(e,t)=>{let i=!1;return e.indexOf(t)>=0&&(i=!0),i};if(s){const o=s.split(","),n=document.createElement("div");let l=!0;const d=e.target.files||e.dataTransfer.files;for(let e=0;e<d.length;e+=1){const t=d[e];if(!l)break;for(let e=0;e<o.length;e+=1){const i=o[e];if(l=t.name.indexOf(i)>0||r(t.type,i.replace(/\*/g,"")),l){TYPE_IS_VALID=!0;break}}}l||(removeOldPreviews(a,i),t.value="",a.insertBefore(n,t),n.textContent=t.dataset.errormessage||"This is not a valid file type.",n.classList.add(ACCEPTED_FILE_MESSAGE_CLASS),a.classList.add("has-invalid-file"),TYPE_IS_VALID=!1,e.preventDefault(),e.stopPropagation())}},handleUpload=(e,t,i,a)=>{preventInvalidFiles(e,t,i,a),!0===TYPE_IS_VALID&&handleChange(e,t,i,a)},fileInput={init(e){selectOrMatches(DROPZONE,e).forEach((e=>{const{instructions:t,dropTarget:i}=enhanceFileInput(e);i.addEventListener("dragover",(function(){this.classList.add(DRAG_CLASS)}),!1),i.addEventListener("dragleave",(function(){this.classList.remove(DRAG_CLASS)}),!1),i.addEventListener("drop",(function(a){a.preventDefault(),this.classList.remove(DRAG_CLASS);const s=a.dataTransfer;if(a.target.files=s.files,s.files.length>1)return;handleUpload(a,e,t,i);const r=new CustomEvent("change",{detail:{files:s.files}});e.dispatchEvent(r)}),!1),e.addEventListener("input",(a=>handleUpload(a,e,t,i)),!1)}))},teardown(e){selectOrMatches(INPUT,e).forEach((e=>{const t=e.parentElement.parentElement;t.parentElement.replaceChild(e,t),e.className=DROPZONE_CLASS}))},getFileInputContext:getFileInputContext,disable:disable,ariaDisable:ariaDisable,enable:enable},extensionToMimeType={".txt":"text/plain",".pdf":"application/pdf",".doc":"application/msword",".docx":"application/vnd.openxmlformats-officedocument.wordprocessingml.document",".odt":"application/vnd.oasis.opendocument.text",".rtf":"application/rtf",".csv":"text/csv",".xls":"application/vnd.ms-excel",".xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",".ppt":"application/vnd.ms-powerpoint",".pptx":"application/vnd.openxmlformats-officedocument.presentationml.presentation",".jpg":"image/jpeg",".jpeg":"image/jpeg",".png":"image/png",".gif":"image/gif",".bmp":"image/bmp",".webp":"image/webp",".tif":"image/tiff",".tiff":"image/tiff",".svg":"image/svg+xml",".mp3":"audio/mpeg",".wav":"audio/wav",".ogg":"audio/ogg",".m4a":"audio/mp4",".aac":"audio/aac",".mp4":"video/mp4",".avi":"video/x-msvideo",".mov":"video/quicktime",".wmv":"video/x-ms-wmv",".flv":"video/x-flv",".mkv":"video/x-matroska",".webm":"video/webm",".zip":"application/zip",".rar":"application/x-rar-compressed",".7z":"application/x-7z-compressed",".tar":"application/x-tar",".gz":"application/gzip",".json":"application/json",".xml":"application/xml",".html":"text/html",".htm":"text/html",".css":"text/css",".js":"application/javascript"},vaFileInputCss='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,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}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 Web", "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{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.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-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;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}}[hidden]{display:none}:host{display:block;font-family:var(--font-source-sans);font-size:16.96px;}:host .label-header{color:var(--vads-color-base);font-weight:var(--font-weight-normal)}:host .label-header-tag{margin:0;display:inline-block}:host .file-input-wrapper{display:block;max-width:30rem;width:100%;position:relative;margin:8px 0}:host .file-input{cursor:pointer;height:100%;width:100%;max-width:none;top:0;left:0;z-index:1;margin:0;position:absolute;text-indent:-999em;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target{border:1px dashed var(--vads-color-action-border-base-active-on-dark);display:block;margin-top:0.3125rem;position:relative;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target.file-input-target-error{border:2px dashed var(--vads-color-secondary-dark)}:host .file-input-box{background:var(--vads-color-white);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:2}:host .file-input-instructions{font-size:1.06rem;padding:1.25rem 0.625rem;pointer-events:none;position:relative;z-index:3}:host .file-input-choose-text{color:var(--vads-color-link);text-decoration:underline;font-weight:var(--font-weight-normal)}:host .file-icon{color:var(--vads-color-primary-alt-darkest)}:host .selected-files-wrapper{background-color:var(--vads-color-primary-lighter);border:1px solid var(--vads-color-base-light)}:host .selected-files-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;border-bottom:1px solid var(--vads-color-white);margin-bottom:8px;padding:8px}:host .va-card{margin:8px}:host .file-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;padding:0 8px;display:block;width:100%;word-wrap:break-word;word-break:break-word;overflow:hidden}:host #input-error-message{padding:0 8px;width:100%}:host .file-size-label,:host .file-status-label{color:var(--vads-color-base-dark);font-weight:var(--font-weight-normal);font-size:1.06rem;padding:0 8px;display:block}:host .file-status-label{font-style:italic}:host .file-info-section{padding:0 8px 8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .file-button-section{margin-top:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row}:host .file-button-section>va-button-icon{font-size:1.06rem}@media screen and (max-width: 320px){:host .file-button-section{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}:host .separator{border:0;border-top:1px solid var(--vads-color-base-lighter);margin:0}:host .vads-u-line-height--2{line-height:1.15}:host .thumbnail-container{height:40px;width:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .thumbnail-preview{max-width:40px;width:auto;max-height:40px;height:auto}:host .thumbnail-error{color:#b21d38}:host va-progress-bar{font-size:var(--vads-font-size-root);display:block;margin-left:16px}:host .uploading-status{font-style:var(--font-style-italic)}:host(.has-error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host(.has-error){margin-left:-0.9rem}}.required{color:var(--vads-color-secondary-dark);margin-left:0.25rem}h1 .required,h2 .required,h3 .required,h4 .required,h5 .required,h6 .required{font-family:var(--font-source-sans);font-size:initial;font-weight:initial}',VaFileInputStyle0=vaFileInputCss,VaFileInput=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaChange=createEvent(this,"vaChange",7),this.vaPasswordChange=createEvent(this,"vaPasswordChange",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.uploadStatus="idle",this.chooseFileString="choose from folder",this.dragFileString="Drag a file here or ",this.FILE_PREVIEW_SIZE_LIMIT=5242880,this.handleChange=e=>{this.resetVisualState=!1;const t=e.target;t.files&&t.files.length>0&&this.handleFile(t.files[0]),t.value=""},this.handleDrop=e=>{e.preventDefault(),e.stopPropagation();const t=e.dataTransfer.files;t.length>0&&this.handleFile(t[0])},this.handleFile=(e,t=!0)=>{if(this.accept){const t=this.normalizeAcceptProp(this.accept);if(!this.isAcceptedFileType(e.type,t))return this.removeFile(!1),void(this.internalError="This is not a valid file type.")}return 0===e.size?(this.internalError="The file you selected is empty. Files must be larger than 0B.",void this.resetState()):e.size>this.maxFileSize?(this.internalError=`\n        We can't upload your file because it's too big. Files must be less than ${this.formatFileSize(this.maxFileSize)}.`,void this.resetState()):e.size<this.minFileSize?(this.internalError=`We can't upload your file because it's too small. Files must be at least ${this.formatFileSize(this.minFileSize)}.`,void this.resetState()):(this.uploadedFile=null,this.file=e,t&&this.vaChange.emit({files:[this.file]}),this.uploadStatus="success",this.internalError=null,e.size<this.FILE_PREVIEW_SIZE_LIMIT&&this.generateFileContents(this.file),this.updateStatusMessage(`You have selected the file: ${this.file.name}`),this.el.focus(),void(this.enableAnalytics&&this.componentLibraryAnalytics.emit({componentName:"va-file-input",action:"change",details:{label:this.label}})))},this.removeFile=(e=!0)=>{this.closeModal(),this.uploadStatus="idle",this.internalError=null,e&&this.vaChange.emit({files:[]}),this.file=null,this.uploadedFile=null,this.updateStatusMessage("File deleted. No file selected."),this.el.focus()},this.openModal=()=>{this.el.shadowRoot.querySelector("va-modal").setAttribute("status","warning"),this.showModal=!0},this.closeModal=()=>{this.showModal=!1,setTimeout((()=>{this.fileInputRef.focus()}),0)},this.changeFile=()=>{this.fileInputRef&&this.fileInputRef.click()},this.formatFileSize=e=>{const t=["B","KB","MB","GB","TB"];if(0===e)return"0 B";const i=Math.floor(Math.log(e)/Math.log(1024));return 0===i?`${e} ${t[i]}`:`${(e/Math.pow(1024,i)).toFixed(i<2?0:1)} ${t[i]}`},this.normalizeAcceptProp=e=>e.split(",").map((e=>(e=e.trim()).startsWith(".")?extensionToMimeType[e]:e)),this.isAcceptedFileType=(e,t)=>{for(const i of t){if(i===e)return!0;if(i.endsWith("/*")&&e.startsWith(i.slice(0,-1)))return!0}return!1},this.renderLabelOrHeader=(e,t,i)=>{const a=t?h("span",{class:"required"}," ",instance.t("required")):null;return h("div",{class:"label-header"},i&&i>=1&&i<=6?h(`h${i}`,{htmlFor:"fileInputField",part:"label",class:"label-header-tag"},e,a):h("label",{htmlFor:"fileInputField",part:"label",class:"usa-label"},e,a))},this.file=void 0,this.fileContents=void 0,this.internalError=void 0,this.showModal=!1,this.showSeparator=!0,this.label=void 0,this.name=void 0,this.buttonText=void 0,this.value=void 0,this.required=!1,this.accept=void 0,this.error=void 0,this.hint=void 0,this.statusText=void 0,this.uploadMessage=null,this.enableAnalytics=!1,this.headerSize=void 0,this.headless=!1,this.readOnly=!1,this.encrypted=!1,this.uploadedFile=void 0,this.maxFileSize=1/0,this.minFileSize=0,this.percentUploaded=null,this.passwordError=void 0,this.resetVisualState=!1}handleValueChange(e){setTimeout((()=>{this.updateStatusMessage(e)}))}percentHandler(e){e>=100&&this.resetState()}handleError(e){e&&this.resetState()}resetState(){this.fileContents=null,this.uploadStatus="idle",this.percentUploaded=null,forceUpdate(this.el)}updateStatusMessage(e){setTimeout((()=>{const t=this.el.shadowRoot.querySelector("#statusMessage");t&&(t.textContent=e)}),1e3)}generateFileContents(e){if(!e)return;const t=new FileReader;this.fileType=e.type,t.onloadend=()=>{this.fileContents=t.result},this.fileType&&("application/pdf"===this.fileType||this.fileType.startsWith("image/"))&&t.readAsDataURL(e)}componentWillRender(){const e=!!this.el.querySelector(":scope > *"),t=!(!this.value&&!this.file||this.readOnly);this.showSeparator=e||t}componentDidLoad(){fileInput.init(this.el)}connectedCallback(){this.el.addEventListener("change",this.handleChange)}disconnectedCallback(){this.el.removeEventListener("change",this.handleChange)}getDefaultUploadMessage(){return h("span",null,this.dragFileString,h("span",{class:"file-input-choose-text"},this.chooseFileString))}handlePasswordChange(e){this.vaPasswordChange.emit({password:e.target.value})}render(){const{label:e,name:t,required:i,accept:a,error:s,hint:r,file:o,uploadStatus:n,dragFileString:l,chooseFileString:d,uploadMessage:c,headerSize:f,fileContents:p,fileType:u,headless:m,value:b,readOnly:g,encrypted:v,statusText:S,uploadedFile:E,percentUploaded:A,passwordError:_,resetVisualState:C}=this;b&&!this.file&&this.handleFile(b,!1);const x=s||this.internalError,y=`${r?"input-hint-message":""} ${x?"input-error-message":""}`.trim()||null,L=("file-input-target "+(x?"file-input-target-error":"")).trim();let w=h("div",{key:"fc0dbff7e0655db69613690f2736404415e9e685",class:"thumbnail-container"},h("svg",{key:"08878f1c236c323029153c8618fc5c81251976e6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"#07648d",width:"40px",height:"40px"},h("path",{key:"ba704e1865a4bff1656d4207edb7668532c75393",d:"M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"})));s?w=h("div",{key:"a2bf58eab94191cf710edcfca9f5198d2026ef6c",class:"thumbnail-container"},h("va-icon",{key:"42f2a3e60bd55dd15ac43ad92c8adf9083430121",icon:"error",size:3,class:"thumbnail-preview thumbnail-error"})):p&&(u.startsWith("image/")?w=h("div",{key:"37813c7af5b91b9fa4f936dd9d878553c0fc6b06",class:"thumbnail-container","aria-hidden":"true"},h("img",{key:"f83ae225048ff3bacb6c753e6b138dc348e6506c",class:"thumbnail-preview",src:p,alt:"image"})):"application/pdf"===u&&(w=h("div",{key:"0f9846968c985520c3b31f75ea4f56ad90195f89",class:"thumbnail-container","aria-hidden":"true"},h("object",{key:"7cfdac338fe9a65a2ed106c745fe0cf5eefea591",class:"thumbnail-preview",data:p,type:"application/pdf"}))));let I=m?"headless-selected-files-wrapper":"selected-files-wrapper";const T="usa-hint"+(m?" usa-sr-only":""),F=null!==A&&A<100;let R="file-status-label";return F&&(R=`${R} uploading-status`),h(Host,{key:"b6a493d9c406c2e056606d7add93c41859e0fcc1",class:{"has-error":!!x}},!g&&h("span",{key:"79b1d7998299fa35afa31d5bb12083b1b5cad660",class:{"usa-sr-only":!!m}},e&&this.renderLabelOrHeader(e,i,f)),r&&!g&&h("div",{key:"7a2478b774fd650080adbffaf8bd60c5228afcb6",class:T,id:"input-hint-message"},r),h("div",{key:"a2129248c0a30e0d99886f6fa9467c7306eb72e8",class:"file-input-wrapper",onDrop:this.handleDrop},h("input",{key:"d5fbd99225ff3bf32f4a7d1ac8524fa60964e5d9",id:"fileInputField",class:"file-input","aria-label":`${e}${i?" "+instance.t("required"):""}. ${l}${d}`,style:{visibility:"success"===this.uploadStatus||E?"hidden":"unset"},type:"file",ref:e=>this.fileInputRef=e,name:t,accept:a,"aria-describedby":y,onChange:this.handleChange}),"idle"===n&&(!E||C)&&h("div",{key:"758eb921e328ba16a2eac16bf50850513bfe804c"},h("span",{key:"5269232fea7f9bbda9e5794e7f688585b09c8590",id:"file-input-error-alert",role:"alert"},x&&h(Fragment,{key:"be178d20ea677f7e72166e94114d9226383b3592"},h("span",{key:"9f67fb46342fc150d5138b35b2a97847d9293e4e",class:"usa-sr-only"},instance.t("error")),h("span",{key:"1149a4f80b548aea74a022668ac25e14703abd55",class:"usa-error-message"},x))),h("div",{key:"3a9fcb6100cf28376763f0038e2787d567a0f412",class:"usa-sr-only","aria-live":"polite",id:"statusMessage"}),h("div",{key:"ad1424836f79a5c6bc277b372a67a98d7185424c",class:L},h("div",{key:"fd40a1dfd66dd3d4b14ae2df1116b0ab4fbd009f",class:"file-input-box"}),h("div",{key:"c7cd51f14ba7d0f9efdc47314a75733573999a9a",class:"file-input-instructions"},c||this.getDefaultUploadMessage()))),!C&&("idle"!==n||E)&&h("div",{key:"bf672fa3120190e256f175ecc76c34390626f982",class:I},!m&&h("div",{key:"07ec300c7d03fc0f92bf57bd3de1fb4e7497dbfc",class:"selected-files-label"},g?"Files you uploaded":"Selected files"),h("div",{key:"763edad50115aa721a66ed5fc4bdafd4f7272797",class:"usa-sr-only","aria-live":"polite",id:"statusMessage"}),h("va-card",{key:"63233724f73c2432010c1b9e3a3895d6125442f3",class:"va-card"},h("div",{key:"e3f80857ea9d557ad8baa1079a4afb6cf20dafb1",class:"file-info-section"},w,h("div",{key:"7b13c7a099f9953c8af45fd1c076c41cd3730531",class:"file-info-group vads-u-line-height--2"},h("span",{key:"309218b78879b0b56603e19c06e2c455446ac0bd",class:"file-label"},o?o.name:E.name),x&&h("span",{key:"97cd825342d29059ef0e97216f3bea9f5f13ce3e",id:"input-error-message",role:"alert"},h("span",{key:"314328894900e013563401c148b2a26336e930e1",class:"usa-sr-only"},instance.t("error")),h("span",{key:"590a8fce7480ead97d4ff3891758ba6d719e3ceb","aria-live":"polite",class:"usa-error-message"},x)),!F&&h("span",{key:"0f2478bb7e228988821f53710bf739deac619fed",class:"file-size-label"},this.formatFileSize(o?o.size:E.size)),h("span",{key:"5495a418c399c850f9fbf061887343ea7572c7b8",class:R,"aria-live":"polite"},F?"Uploading...":S))),(o||b||E)&&h("div",{key:"aa21bb39bd61e044b2f916a8a340917a9939293e"},this.showSeparator&&h("hr",{key:"8078c79efc74285ce9db259c28a1c6b2e957a09f",class:"separator"}),v&&h("va-text-input",{key:"afe9d29888e387ce07a2ae73e95232612b2436e2",onInput:e=>{this.handlePasswordChange(e)},label:"File password",required:!0,error:_}),h("div",{key:"f87bd5759f0e97ecafe4777d54a8325e293e25a7",class:"additional-info-slot"},h("slot",{key:"7ff476d9e45e2b05002a57611ea19a90555ee86a"})),g?null:F?h(Fragment,null,h("va-progress-bar",{percent:A}),h("va-button-icon",{buttonType:"cancel",onClick:this.resetState.bind(this)})):h(Fragment,null,h("div",{class:"file-button-section"},h("va-button-icon",{buttonType:"change-file",onClick:this.changeFile,label:"Change file","aria-label":`change file ${o?o.name:E.name}`}),h("va-button-icon",{buttonType:"delete",onClick:this.openModal,"aria-label":`delete file ${o?o.name:E.name}`,label:"Delete"})),h("va-modal",{modalTitle:"Delete this file?",visible:this.showModal,primaryButtonText:"Yes, delete this",secondaryButtonText:"No, keep this",onCloseEvent:this.closeModal,onPrimaryButtonClick:()=>this.removeFile(!0),onSecondaryButtonClick:this.closeModal},"We'll delete the uploaded file"," ",h("span",{class:"file-label"},o?o.name:E.name))))))))}get el(){return this}static get watchers(){return{statusText:["handleValueChange"],percentUploaded:["percentHandler"],resetVisualState:["handleError"]}}static get style(){return VaFileInputStyle0}},[1,"va-file-input",{label:[1],name:[1],buttonText:[1,"button-text"],value:[16],required:[4],accept:[1],error:[1],hint:[1],statusText:[1,"status-text"],uploadMessage:[16],enableAnalytics:[4,"enable-analytics"],headerSize:[2,"header-size"],headless:[4],readOnly:[4,"read-only"],encrypted:[4],uploadedFile:[16],maxFileSize:[2,"max-file-size"],minFileSize:[2,"min-file-size"],percentUploaded:[1026,"percent-uploaded"],passwordError:[1,"password-error"],resetVisualState:[1028,"reset-visual-state"],file:[32],fileContents:[32],internalError:[32],showModal:[32],showSeparator:[32]},void 0,{statusText:["handleValueChange"],percentUploaded:["percentHandler"],resetVisualState:["handleError"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-file-input","va-button","va-button-icon","va-card","va-icon","va-modal","va-progress-bar","va-text-input"].forEach((e=>{switch(e){case"va-file-input":customElements.get(e)||customElements.define(e,VaFileInput);break;case"va-button":customElements.get(e)||defineCustomElement$7();break;case"va-button-icon":customElements.get(e)||defineCustomElement$6();break;case"va-card":customElements.get(e)||defineCustomElement$5();break;case"va-icon":customElements.get(e)||defineCustomElement$4();break;case"va-modal":customElements.get(e)||defineCustomElement$3();break;case"va-progress-bar":customElements.get(e)||defineCustomElement$2();break;case"va-text-input":customElements.get(e)||defineCustomElement$1()}}))}export{VaFileInput as V,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,createEvent,h,forceUpdate,Host,Fragment}from"@stencil/core/internal/client";import"./i18n-setup.js";import"./contacts.js";import{s as selectOrMatches,S as Sanitizer}from"./utils.js";import{d as defineCustomElement$7}from"./va-button2.js";import{d as defineCustomElement$6}from"./va-button-icon2.js";import{d as defineCustomElement$5}from"./va-card2.js";import{d as defineCustomElement$4}from"./va-icon2.js";import{d as defineCustomElement$3}from"./va-modal2.js";import{d as defineCustomElement$2}from"./va-progress-bar2.js";import{d as defineCustomElement$1}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const PREFIX="usa",DROPZONE_CLASS="usa-file-input",DROPZONE=`.${DROPZONE_CLASS}`,INPUT_CLASS="usa-file-input__input",TARGET_CLASS="usa-file-input__target",INPUT=`.${INPUT_CLASS}`,BOX_CLASS="usa-file-input__box",INSTRUCTIONS_CLASS="usa-file-input__instructions",PREVIEW_CLASS="usa-file-input__preview",PREVIEW_HEADING_CLASS="usa-file-input__preview-heading",DISABLED_CLASS="usa-file-input--disabled",CHOOSE_CLASS="usa-file-input__choose",ACCEPTED_FILE_MESSAGE_CLASS="usa-file-input__accepted-files-message",DRAG_TEXT_CLASS="usa-file-input__drag-text",DRAG_CLASS="usa-file-input--drag",LOADING_CLASS="is-loading",INVALID_FILE_CLASS="has-invalid-file",GENERIC_PREVIEW_CLASS_NAME="usa-file-input__preview-image",GENERIC_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--generic`,PDF_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--pdf`,WORD_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--word`,VIDEO_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--video`,EXCEL_PREVIEW_CLASS=`${GENERIC_PREVIEW_CLASS_NAME}--excel`,SR_ONLY_CLASS="usa-sr-only",SPACER_GIF="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";let TYPE_IS_VALID=Boolean(!0),DEFAULT_ARIA_LABEL_TEXT="",DEFAULT_FILE_STATUS_TEXT="";const getFileInputContext=e=>{const t=e.closest(DROPZONE);if(!t)throw new Error(`Element is missing outer ${DROPZONE}`);const i=t.querySelector(INPUT);return{dropZoneEl:t,inputEl:i}},disable=e=>{const{dropZoneEl:t,inputEl:i}=getFileInputContext(e);i.disabled=!0,t.classList.add(DISABLED_CLASS)},ariaDisable=e=>{const{dropZoneEl:t}=getFileInputContext(e);t.classList.add(DISABLED_CLASS)},enable=e=>{const{dropZoneEl:t,inputEl:i}=getFileInputContext(e);i.disabled=!1,t.classList.remove(DISABLED_CLASS),t.removeAttribute("aria-disabled")},replaceName=e=>{const t=e.charCodeAt(0);return 32===t?"-":t>=65&&t<=90?`img_${e.toLowerCase()}`:`__000${t.toString(16).slice(-4)}`},makeSafeForID=e=>e.replace(/[^a-z0-9]/g,replaceName),createUniqueID=e=>`${e}-${Math.floor(Date.now()/1e3)}`,getItemsLabel=e=>e.hasAttribute("multiple")?"files":"file",createTargetArea=e=>{const t=document.createElement("div"),i=document.createElement("div"),a=document.createElement("div");return e.classList.remove(DROPZONE_CLASS),e.classList.add(INPUT_CLASS),t.classList.add(DROPZONE_CLASS),a.classList.add(BOX_CLASS),i.classList.add(TARGET_CLASS),i.prepend(a),e.parentNode.insertBefore(i,e),e.parentNode.insertBefore(t,i),i.appendChild(e),t.appendChild(i),i},createVisibleInstructions=e=>{const t=e.closest(DROPZONE),i=getItemsLabel(e),a=document.createElement("div"),s=`Drag ${i} here or`,r="choose from folder";return DEFAULT_ARIA_LABEL_TEXT=`${s} ${r}`,a.classList.add(INSTRUCTIONS_CLASS),a.setAttribute("aria-hidden","true"),e.setAttribute("aria-label",DEFAULT_ARIA_LABEL_TEXT),a.innerHTML=Sanitizer.escapeHTML(`<span class="${DRAG_TEXT_CLASS}">${s}</span> <span class="${CHOOSE_CLASS}">${r}</span>`),e.parentNode.insertBefore(a,e),(/rv:11.0/i.test(navigator.userAgent)||/Edge\/\d./i.test(navigator.userAgent))&&(t.querySelector(`.${DRAG_TEXT_CLASS}`).outerHTML=""),a},createSROnlyStatus=e=>{const t=document.createElement("div"),i=getItemsLabel(e),a=e.closest(DROPZONE),s=e.closest(`.${TARGET_CLASS}`);DEFAULT_FILE_STATUS_TEXT=`No ${i} selected.`,t.classList.add("usa-sr-only"),t.setAttribute("aria-live","polite"),t.textContent=DEFAULT_FILE_STATUS_TEXT,a.insertBefore(t,s)},enhanceFileInput=e=>{const t=e.hasAttribute("aria-disabled")||e.hasAttribute("disabled"),i=createTargetArea(e),a=createVisibleInstructions(e),{dropZoneEl:s}=getFileInputContext(e);return t?s.classList.add(DISABLED_CLASS):createSROnlyStatus(e),{instructions:a,dropTarget:i}},removeOldPreviews=(e,t)=>{const i=e.querySelectorAll(`.${PREVIEW_CLASS}`),a=e.querySelector(`.${PREVIEW_HEADING_CLASS}`),s=e.querySelector(`.${ACCEPTED_FILE_MESSAGE_CLASS}`);a&&(a.outerHTML=""),s&&(s.outerHTML="",e.classList.remove("has-invalid-file")),null!==i&&(t&&t.removeAttribute("hidden"),Array.prototype.forEach.call(i,(e=>{e.parentNode.removeChild(e)})))},updateStatusMessage=(e,t,i)=>{const a=e;let s=DEFAULT_FILE_STATUS_TEXT;1===t.length?s=`You have selected the file: ${i}`:t.length>1&&(s=`You have selected ${t.length} files: ${i.join(", ")}`),setTimeout((()=>{a.textContent=s}),1e3)},addPreviewHeading=(e,t)=>{const i=document.createElement("div"),a=e.closest(`.${TARGET_CLASS}`),s=a.querySelector(`.${INSTRUCTIONS_CLASS}`);let r="Change file",n="";1===t.length?n=Sanitizer.escapeHTML(`Selected file <span class="usa-file-input__choose">${r}</span>`):t.length>1&&(r="Change files",n=Sanitizer.escapeHTML(`${t.length} files selected <span class="usa-file-input__choose">${r}</span>`)),s.setAttribute("hidden","true"),i.classList.add(PREVIEW_HEADING_CLASS),i.innerHTML=n,a.insertBefore(i,s),e.setAttribute("aria-label",r)},handleChange=(e,t,i,a)=>{const s=t.getAttribute("multiple")?e.target.files:[e.target.files[0]],r=a.closest(`.${DROPZONE_CLASS}`).querySelector(".usa-sr-only"),n=[];removeOldPreviews(a,i);for(let e=0;e<s.length;e+=1){const t=new FileReader,r=s[e].name;let o;n.push(r),t.onloadstart=function(){o=createUniqueID(makeSafeForID(r)),i.insertAdjacentHTML("afterend",Sanitizer.escapeHTML(`<div class="${PREVIEW_CLASS}" aria-hidden="true">\n          <img id="${o}" src="${SPACER_GIF}" alt="" class="${GENERIC_PREVIEW_CLASS_NAME} is-loading"/>${r}\n        <div>`))},t.onloadend=function(){const e=a.querySelector(`#${o}`);r.indexOf(".pdf")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${PDF_PREVIEW_CLASS}")`):r.indexOf(".doc")>0||r.indexOf(".pages")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${WORD_PREVIEW_CLASS}")`):r.indexOf(".xls")>0||r.indexOf(".numbers")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${EXCEL_PREVIEW_CLASS}")`):r.indexOf(".mov")>0||r.indexOf(".mp4")>0?e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${VIDEO_PREVIEW_CLASS}")`):e.setAttribute("onerror",`this.onerror=null;this.src="${SPACER_GIF}"; this.classList.add("${GENERIC_PREVIEW_CLASS}")`),e.classList.remove("is-loading"),e.src=t.result},s[e]&&t.readAsDataURL(s[e])}0===s.length?t.setAttribute("aria-label",DEFAULT_ARIA_LABEL_TEXT):addPreviewHeading(t,s),updateStatusMessage(r,s,n)},preventInvalidFiles=(e,t,i,a)=>{const s=t.getAttribute("accept");a.classList.remove("has-invalid-file");const r=(e,t)=>{let i=!1;return e.indexOf(t)>=0&&(i=!0),i};if(s){const n=s.split(","),o=document.createElement("div");let l=!0;const d=e.target.files||e.dataTransfer.files;for(let e=0;e<d.length;e+=1){const t=d[e];if(!l)break;for(let e=0;e<n.length;e+=1){const i=n[e];if(l=t.name.indexOf(i)>0||r(t.type,i.replace(/\*/g,"")),l){TYPE_IS_VALID=!0;break}}}l||(removeOldPreviews(a,i),t.value="",a.insertBefore(o,t),o.textContent=t.dataset.errormessage||"This is not a valid file type.",o.classList.add(ACCEPTED_FILE_MESSAGE_CLASS),a.classList.add("has-invalid-file"),TYPE_IS_VALID=!1,e.preventDefault(),e.stopPropagation())}},handleUpload=(e,t,i,a)=>{preventInvalidFiles(e,t,i,a),!0===TYPE_IS_VALID&&handleChange(e,t,i,a)},fileInput={init(e){selectOrMatches(DROPZONE,e).forEach((e=>{const{instructions:t,dropTarget:i}=enhanceFileInput(e);i.addEventListener("dragover",(function(){this.classList.add(DRAG_CLASS)}),!1),i.addEventListener("dragleave",(function(){this.classList.remove(DRAG_CLASS)}),!1),i.addEventListener("drop",(function(a){a.preventDefault(),this.classList.remove(DRAG_CLASS);const s=a.dataTransfer;if(a.target.files=s.files,s.files.length>1)return;handleUpload(a,e,t,i);const r=new CustomEvent("change",{detail:{files:s.files}});e.dispatchEvent(r)}),!1),e.addEventListener("input",(a=>handleUpload(a,e,t,i)),!1)}))},teardown(e){selectOrMatches(INPUT,e).forEach((e=>{const t=e.parentElement.parentElement;t.parentElement.replaceChild(e,t),e.className=DROPZONE_CLASS}))},getFileInputContext:getFileInputContext,disable:disable,ariaDisable:ariaDisable,enable:enable},extensionToMimeType={".txt":"text/plain",".pdf":"application/pdf",".doc":"application/msword",".docx":"application/vnd.openxmlformats-officedocument.wordprocessingml.document",".odt":"application/vnd.oasis.opendocument.text",".rtf":"application/rtf",".csv":"text/csv",".xls":"application/vnd.ms-excel",".xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",".ppt":"application/vnd.ms-powerpoint",".pptx":"application/vnd.openxmlformats-officedocument.presentationml.presentation",".jpg":"image/jpeg",".jpeg":"image/jpeg",".png":"image/png",".gif":"image/gif",".bmp":"image/bmp",".webp":"image/webp",".tif":"image/tiff",".tiff":"image/tiff",".svg":"image/svg+xml",".mp3":"audio/mpeg",".wav":"audio/wav",".ogg":"audio/ogg",".m4a":"audio/mp4",".aac":"audio/aac",".mp4":"video/mp4",".avi":"video/x-msvideo",".mov":"video/quicktime",".wmv":"video/x-ms-wmv",".flv":"video/x-flv",".mkv":"video/x-matroska",".webm":"video/webm",".zip":"application/zip",".rar":"application/x-rar-compressed",".7z":"application/x-7z-compressed",".tar":"application/x-tar",".gz":"application/gzip",".json":"application/json",".xml":"application/xml",".html":"text/html",".htm":"text/html",".css":"text/css",".js":"application/javascript"},vaFileInputCss='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,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}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 Web", "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{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.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-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;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}}[hidden]{display:none}:host{display:block;font-family:var(--font-source-sans);font-size:16.96px;}:host .label-header{color:var(--vads-color-base);font-weight:var(--font-weight-normal)}:host .label-header-tag{margin:0;display:inline-block}:host .file-input-wrapper{display:block;max-width:30rem;width:100%;position:relative;margin:8px 0}:host .file-input{cursor:pointer;height:100%;width:100%;max-width:none;top:0;left:0;z-index:1;margin:0;position:absolute;text-indent:-999em;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target{border:1px dashed var(--vads-color-action-border-base-active-on-dark);display:block;margin-top:0.3125rem;position:relative;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}:host .file-input-target.file-input-target-error{border:2px dashed var(--vads-color-secondary-dark)}:host .file-input-box{background:var(--vads-color-white);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:2}:host .file-input-instructions{font-size:1.06rem;padding:1.25rem 0.625rem;pointer-events:none;position:relative;z-index:3}:host .file-input-choose-text{color:var(--vads-color-link);text-decoration:underline;font-weight:var(--font-weight-normal)}:host .file-icon{color:var(--vads-color-primary-alt-darkest)}:host .selected-files-wrapper{background-color:var(--vads-color-primary-lighter);border:1px solid var(--vads-color-base-light)}:host .selected-files-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;border-bottom:1px solid var(--vads-color-white);margin-bottom:8px;padding:8px}:host .va-card{margin:8px}:host .file-label{color:var(--vads-color-base);font-weight:var(--font-weight-bold);font-size:1.06rem;padding:0 8px;display:block;width:100%;word-wrap:break-word;word-break:break-word;overflow:hidden}:host #input-error-message{padding:0 8px;width:100%}:host .file-size-label,:host .file-status-label{color:var(--vads-color-base-dark);font-weight:var(--font-weight-normal);font-size:1.06rem;padding:0 8px;display:block}:host .file-status-label{font-style:italic}:host .file-info-section{padding:0 8px 8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .file-button-section{margin-top:8px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row}:host .file-button-section>va-button-icon{font-size:1.06rem}@media screen and (max-width: 320px){:host .file-button-section{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}:host .separator{border:0;border-top:1px solid var(--vads-color-base-lighter);margin:0}:host .vads-u-line-height--2{line-height:1.15}:host .thumbnail-container{height:40px;width:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .thumbnail-preview{max-width:40px;width:auto;max-height:40px;height:auto}:host .thumbnail-error{color:#b21d38}:host va-progress-bar{font-size:var(--vads-font-size-root);display:block;margin-left:16px}:host .uploading-status{font-style:var(--font-style-italic)}:host(.has-error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host(.has-error){margin-left:-0.9rem}}.required{color:var(--vads-color-secondary-dark);margin-left:0.25rem}h1 .required,h2 .required,h3 .required,h4 .required,h5 .required,h6 .required{font-family:var(--font-source-sans);font-size:initial;font-weight:initial}',VaFileInputStyle0=vaFileInputCss,VaFileInput=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaChange=createEvent(this,"vaChange",7),this.vaPasswordChange=createEvent(this,"vaPasswordChange",7),this.vaFileInputError=createEvent(this,"vaFileInputError",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.uploadStatus="idle",this.chooseFileString="choose from folder",this.dragFileString="Drag a file here or ",this.FILE_PREVIEW_SIZE_LIMIT=5242880,this.handleChange=e=>{this.resetVisualState=!1;const t=e.target;t.files&&t.files.length>0&&this.handleFile(t.files[0]),t.value=""},this.handleDrop=e=>{e.preventDefault(),e.stopPropagation();const t=e.dataTransfer.files;t.length>0&&this.handleFile(t[0])},this.handleFile=(e,t=!0)=>{let i=null;if(this.accept){const t=this.normalizeAcceptProp(this.accept);this.isAcceptedFileType(e.type,t)||(this.removeFile(!1),i="This is not a valid file type.")}if(0===e.size&&(i="The file you selected is empty. Files must be larger than 0B."),e.size>this.maxFileSize&&(i=`\n        We can't upload your file because it's too big. Files must be less than ${this.formatFileSize(this.maxFileSize)}.`),e.size<this.minFileSize&&(i=`We can't upload your file because it's too small. Files must be at least ${this.formatFileSize(this.minFileSize)}.`),i)return this.internalError=i,this.vaFileInputError.emit({error:i}),void this.resetState();this.uploadedFile=null,this.file=e,t&&this.vaChange.emit({files:[this.file]}),this.uploadStatus="success",this.internalError=null,e.size<this.FILE_PREVIEW_SIZE_LIMIT&&this.generateFileContents(this.file),this.updateStatusMessage(`You have selected the file: ${this.file.name}`),this.el.focus(),this.enableAnalytics&&this.componentLibraryAnalytics.emit({componentName:"va-file-input",action:"change",details:{label:this.label}})},this.removeFile=(e=!0)=>{this.closeModal(),this.uploadStatus="idle",this.internalError=null,e&&this.vaChange.emit({files:[]}),this.file=null,this.uploadedFile=null,this.updateStatusMessage("File deleted. No file selected."),this.el.focus()},this.openModal=()=>{this.el.shadowRoot.querySelector("va-modal").setAttribute("status","warning"),this.showModal=!0},this.closeModal=()=>{this.showModal=!1,setTimeout((()=>{this.fileInputRef.focus()}),0)},this.changeFile=()=>{this.fileInputRef&&this.fileInputRef.click()},this.formatFileSize=e=>{const t=["B","KB","MB","GB","TB"];if(0===e)return"0 B";const i=Math.floor(Math.log(e)/Math.log(1024));return 0===i?`${e} ${t[i]}`:`${(e/Math.pow(1024,i)).toFixed(i<2?0:1)} ${t[i]}`},this.normalizeAcceptProp=e=>e.split(",").map((e=>(e=e.trim()).startsWith(".")?extensionToMimeType[e]:e)),this.isAcceptedFileType=(e,t)=>{for(const i of t){if(i===e)return!0;if(i.endsWith("/*")&&e.startsWith(i.slice(0,-1)))return!0}return!1},this.renderLabelOrHeader=(e,t,i)=>{const a=t?h("span",{class:"required"}," ",instance.t("required")):null;return h("div",{class:"label-header"},i&&i>=1&&i<=6?h(`h${i}`,{htmlFor:"fileInputField",part:"label",class:"label-header-tag"},e,a):h("label",{htmlFor:"fileInputField",part:"label",class:"usa-label"},e,a))},this.file=void 0,this.fileContents=void 0,this.internalError=void 0,this.showModal=!1,this.showSeparator=!0,this.label=void 0,this.name=void 0,this.value=void 0,this.required=!1,this.accept=void 0,this.error=void 0,this.hint=void 0,this.statusText=void 0,this.uploadMessage=null,this.enableAnalytics=!1,this.headerSize=void 0,this.headless=!1,this.readOnly=!1,this.encrypted=!1,this.uploadedFile=void 0,this.maxFileSize=1/0,this.minFileSize=0,this.percentUploaded=null,this.passwordError=void 0,this.resetVisualState=!1}handleValueChange(e){setTimeout((()=>{this.updateStatusMessage(e)}))}percentHandler(e){e>=100&&this.resetState()}handleResetVisualState(e){e&&this.resetState()}handleError(e,t){t&&e&&this.resetState()}resetState(){this.fileContents=null,this.uploadStatus="idle",this.percentUploaded=null,forceUpdate(this.el)}updateStatusMessage(e){setTimeout((()=>{const t=this.el.shadowRoot.querySelector("#statusMessage");t&&(t.textContent=e)}),1e3)}async generateFileContents(e){if(!e)return;const t=e.slice(0,20),i=await t.arrayBuffer();if(new Uint8Array(i).every((e=>0===e)))return;const a=new FileReader;this.fileType=e.type,a.onloadend=()=>{this.fileContents=a.result},this.fileType&&("application/pdf"===this.fileType||this.fileType.startsWith("image/"))&&a.readAsDataURL(e)}componentWillRender(){const e=!!this.el.querySelector(":scope > *"),t=!(!this.value&&!this.file||this.readOnly);this.showSeparator=e||t}componentDidLoad(){fileInput.init(this.el)}connectedCallback(){this.el.addEventListener("change",this.handleChange)}disconnectedCallback(){this.el.removeEventListener("change",this.handleChange)}getDefaultUploadMessage(){return h("span",null,this.dragFileString,h("span",{class:"file-input-choose-text"},this.chooseFileString))}handlePasswordChange(e){this.vaPasswordChange.emit({password:e.target.value})}render(){const{label:e,name:t,required:i,accept:a,error:s,hint:r,dragFileString:n,chooseFileString:o,uploadMessage:l,headerSize:d,fileContents:c,fileType:p,headless:f,value:u,readOnly:m,encrypted:b,statusText:g,uploadedFile:v,percentUploaded:S,passwordError:E,resetVisualState:A}=this;u&&!this.file&&this.handleFile(u,!1);const{uploadStatus:_,file:C}=this,x=s||this.internalError,y=`${r?"input-hint-message":""} ${x?"input-error-message":""}`.trim()||null,L=("file-input-target "+(x?"file-input-target-error":"")).trim();let w=h("div",{key:"a37ee033bf7b33e0b610c5c6557d1c784f51d1e4",class:"thumbnail-container"},h("svg",{key:"878a9302603975ba779660f55a3501f0b9f78e13",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"#07648d",width:"40px",height:"40px"},h("path",{key:"37070122c24ad2018d1571dabc862cc98f76c824",d:"M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"})));s?w=h("div",{key:"9c201b6f22baf4aa80b1d103bf18714e390965d3",class:"thumbnail-container"},h("va-icon",{key:"469bda7e898ec6b00b008f7a80dfd652d7d61ca8",icon:"error",size:3,class:"thumbnail-preview thumbnail-error"})):c&&(p.startsWith("image/")?w=h("div",{key:"df0ba76dde9769a07527278647187090049c04f8",class:"thumbnail-container","aria-hidden":"true"},h("img",{key:"1a58ef08e824ea2a1fba9147aca46da3832ca1bd",class:"thumbnail-preview",src:c,alt:"image"})):"application/pdf"===p&&(w=h("div",{key:"aea5263641c1de8d5b5fe7901b4aecfca1433907",class:"thumbnail-container","aria-hidden":"true"},h("object",{key:"be367f8ec30b9e2c20ecf19b213f93b3838846e8",class:"thumbnail-preview",data:c,type:"application/pdf"}))));let I=f?"headless-selected-files-wrapper":"selected-files-wrapper";const T="usa-hint"+(f?" usa-sr-only":""),F=null!==S&&S<100;let R="file-status-label";return F&&(R=`${R} uploading-status`),h(Host,{key:"359c0aef294acfaba667ced810c29732c350bfcb",class:{"has-error":!!x}},!m&&h("span",{key:"97a6d695f0f72d3c67989cab7de2fed0cb408f27",class:{"usa-sr-only":!!f}},e&&this.renderLabelOrHeader(e,i,d)),r&&!m&&h("div",{key:"67c5a9be3315484f21761ac33e5a22c49de9acc1",class:T,id:"input-hint-message"},r),h("div",{key:"a4d3bd3c321f2277c2d03c20165d5a9d4b01db5b",class:"file-input-wrapper",onDrop:this.handleDrop},h("input",{key:"5ac45c79d32b2436e2e82bbb8ad45d8fe347b098",id:"fileInputField",class:"file-input","aria-label":`${e}${i?" "+instance.t("required"):""}. ${n}${o}`,style:{visibility:"success"===this.uploadStatus||v?"hidden":"unset"},type:"file",ref:e=>this.fileInputRef=e,name:t,accept:a,"aria-describedby":y,onChange:this.handleChange}),"idle"===_&&(!v||A)&&h("div",{key:"9246d4954e5a2c3be30083d5292387b9ec25fb4f"},h("span",{key:"d666b195c5147978cb638d169b3dd57605d4b738",id:"file-input-error-alert",role:"alert"},x&&h(Fragment,{key:"7dcce8e05918d99efcbfdd974965163bf429497a"},h("span",{key:"690c0159346aeb366a93e8ba38e397fc6b5ae629",class:"usa-sr-only"},instance.t("error")),h("span",{key:"4e8ded0ec5f930e75df9e1298cf245fff4245bf1",class:"usa-error-message"},x))),h("div",{key:"4a201bb12b1385a552d87ca062b8ce7405927d87",class:"usa-sr-only","aria-live":"polite",id:"statusMessage"}),h("div",{key:"2bc855ecfc75a679db05963bc6e16db55c519fd7",class:L},h("div",{key:"00a5dd6806677f82bf09a176d2e810913bc9b513",class:"file-input-box"}),h("div",{key:"2552254974811c1a6cacaa2e5700340d8f3b0ff7",class:"file-input-instructions"},l||this.getDefaultUploadMessage()))),!A&&("idle"!==_||v)&&h("div",{key:"d5b6755b8c0ffee3c37ad68145006962782433b1",class:I},!f&&h("div",{key:"cb1284bdd13a45ea506f2073f156ac80c89896eb",class:"selected-files-label"},m?"Files you uploaded":"Selected files"),h("div",{key:"ce05504fea2a3e516292be0d0c7f2d3e369e9510",class:"usa-sr-only","aria-live":"polite",id:"statusMessage"}),h("va-card",{key:"e0734de8c67559528525909c790ed54c691ec872",class:"va-card"},h("div",{key:"e5dd286675bcaaaf3ae2badeb727fecd911c0eba",class:"file-info-section"},w,h("div",{key:"280475edb7b28efe4f974b6b7a71a3a48fe9b8f2",class:"file-info-group vads-u-line-height--2"},h("span",{key:"f3a2da94d975abb7dcd74e23aa0ab7e931644954",class:"file-label"},C?C.name:v.name),x&&h("span",{key:"66843d7ba1515081199777e4885b8720bda63615",id:"input-error-message",role:"alert"},h("span",{key:"7e252b04dfa12d6dc6b23e2384ec0d14147ecec5",class:"usa-sr-only"},instance.t("error")),h("span",{key:"213efa8104c58b75e3b6434818aaad08559590d2","aria-live":"polite",class:"usa-error-message"},x)),!F&&h("span",{key:"020a5937202a13fb318da4a679546f3caed62781",class:"file-size-label"},this.formatFileSize(C?C.size:v.size)),h("span",{key:"0e063fc6b681016196366c36ee322f8578d95d14",class:R,"aria-live":"polite"},F?"Uploading...":g))),(C||u||v)&&h("div",{key:"72343f7356d7b81602c43f3adc36966d5de280b3"},this.showSeparator&&h("hr",{key:"891e5a811f93f6e7e02cc6f478cdf5d6ea83aefd",class:"separator"}),b&&h("va-text-input",{key:"a798d8bc6aac4111f990c4c0898305bea668bb37",onInput:e=>{this.handlePasswordChange(e)},label:"File password",required:!0,error:E}),h("div",{key:"fdd22f3bfc0828d54a3ceb0c4239c005a7e869ad",class:"additional-info-slot"},h("slot",{key:"5762a041a29a548720cc623162365c548e81ce7f"})),m?null:F?h(Fragment,null,h("va-progress-bar",{percent:S}),h("va-button-icon",{buttonType:"cancel",onClick:this.resetState.bind(this)})):h(Fragment,null,h("div",{class:"file-button-section"},h("va-button-icon",{buttonType:"change-file",onClick:this.changeFile,label:"Change file","aria-label":`change file ${C?C.name:v.name}`}),h("va-button-icon",{buttonType:"delete",onClick:this.openModal,"aria-label":`delete file ${C?C.name:v.name}`,label:"Delete"})),h("va-modal",{modalTitle:"Delete this file?",visible:this.showModal,primaryButtonText:"Yes, delete this",secondaryButtonText:"No, keep this",onCloseEvent:this.closeModal,onPrimaryButtonClick:()=>this.removeFile(!0),onSecondaryButtonClick:this.closeModal},"We'll delete the uploaded file"," ",h("span",{class:"file-label"},C?C.name:v.name))))))))}get el(){return this}static get watchers(){return{statusText:["handleValueChange"],percentUploaded:["percentHandler"],resetVisualState:["handleResetVisualState"],error:["handleError"]}}static get style(){return VaFileInputStyle0}},[1,"va-file-input",{label:[1],name:[1],value:[16],required:[4],accept:[1],error:[1],hint:[1],statusText:[1,"status-text"],uploadMessage:[16],enableAnalytics:[4,"enable-analytics"],headerSize:[2,"header-size"],headless:[4],readOnly:[4,"read-only"],encrypted:[4],uploadedFile:[16],maxFileSize:[2,"max-file-size"],minFileSize:[2,"min-file-size"],percentUploaded:[1026,"percent-uploaded"],passwordError:[1,"password-error"],resetVisualState:[1028,"reset-visual-state"],file:[32],fileContents:[32],internalError:[32],showModal:[32],showSeparator:[32]},void 0,{statusText:["handleValueChange"],percentUploaded:["percentHandler"],resetVisualState:["handleResetVisualState"],error:["handleError"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-file-input","va-button","va-button-icon","va-card","va-icon","va-modal","va-progress-bar","va-text-input"].forEach((e=>{switch(e){case"va-file-input":customElements.get(e)||customElements.define(e,VaFileInput);break;case"va-button":customElements.get(e)||defineCustomElement$7();break;case"va-button-icon":customElements.get(e)||defineCustomElement$6();break;case"va-card":customElements.get(e)||defineCustomElement$5();break;case"va-icon":customElements.get(e)||defineCustomElement$4();break;case"va-modal":customElements.get(e)||defineCustomElement$3();break;case"va-progress-bar":customElements.get(e)||defineCustomElement$2();break;case"va-text-input":customElements.get(e)||defineCustomElement$1()}}))}export{VaFileInput as V,defineCustomElement as d};

package/dist/components/va-segmented-progress-bar.js

@@ -1 +1 @@
-import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";const vaSegmentedProgressBarCss='.sr-only{border:0;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}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,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}.usa-step-indicator{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.1;background-color:white;margin-bottom:2rem;margin-left:-1px;margin-right:-1px}@media all and (min-width: 40em){.usa-step-indicator{margin-left:0;margin-right:0}}.usa-step-indicator__segments{counter-reset:usa-step-indicator;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0}.usa-step-indicator__segment{-ms-flex:1 1 0%;flex:1 1 0%;counter-increment:usa-step-indicator;margin-left:1px;margin-right:1px;max-width:15rem;min-height:0.5rem;position:relative}.usa-step-indicator__segment:after{background-color:#919191;content:"";display:block;height:0.5rem;left:0;position:absolute;right:0;top:0}@media all and (min-width: 40em){.usa-step-indicator__segment:after{height:0.5rem}}.usa-step-indicator__segment--complete::after{background-color:#162e51}.usa-step-indicator__segment--complete .usa-step-indicator__segment-label{color:#162e51}.usa-step-indicator__segment--current::after{background-color:#005ea2}.usa-step-indicator__segment--current .usa-step-indicator__segment-label{color:#005ea2;font-weight:700}.usa-step-indicator__segment-label{display:none}@media all and (min-width: 40em){.usa-step-indicator__segment-label{color:#565c65;display:block;font-size:1.06rem;margin-top:calc(\n      0.5rem + 0.5rem\n    );padding-right:2rem;text-align:left}}.usa-step-indicator__header{-ms-flex-align:baseline;align-items:baseline;display:-ms-flexbox;display:flex}.usa-step-indicator__heading{color:#1b1b1b;font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.13rem;font-weight:700;margin:1rem 0 0}@media all and (min-width: 40em){.usa-step-indicator__heading{font-size:1.46rem;margin-top:2rem}}.usa-step-indicator__current-step{height:2.5rem;border-radius:99rem;width:2.5rem;font-weight:normal;-webkit-font-feature-settings:"tnum" 1, "kern" 1;font-feature-settings:"tnum" 1, "kern" 1;background-color:#005ea2;color:white;display:inline-block;padding:calc((2.5rem - (2ex * 1.1)) * 0.5);text-align:center}.usa-step-indicator__total-steps{font-weight:normal;-webkit-font-feature-settings:"tnum" 1, "kern" 1;font-feature-settings:"tnum" 1, "kern" 1;color:#005ea2;margin-right:0.5rem}@media all and (min-width: 40em){.usa-step-indicator--counters .usa-step-indicator__segment,.usa-step-indicator--counters-sm .usa-step-indicator__segment{margin-left:0;margin-right:0;margin-top:calc(\n          (\n              (\n                  2.5rem -\n                    0.5rem\n                ) /\n                2\n            ) +\n            0.25rem\n        )}.usa-step-indicator--counters .usa-step-indicator__segment:before,.usa-step-indicator--counters-sm .usa-step-indicator__segment:before{height:2.5rem;border-radius:99rem;width:2.5rem;-webkit-font-feature-settings:"tnum" 1, "kern" 1;font-feature-settings:"tnum" 1, "kern" 1;background-color:white;-webkit-box-shadow:inset 0 0 0 0.25rem #919191, 0 0 0 0.25rem white;box-shadow:inset 0 0 0 0.25rem #919191, 0 0 0 0.25rem white;color:#565c65;content:counter(usa-step-indicator);display:block;font-weight:700;left:0;line-height:0.9;padding:calc((2.5rem - (2ex * 0.9)) * 0.5);position:absolute;text-align:center;top:calc((\n              2.5rem - 0.5rem\n            ) / -2);z-index:100}.usa-step-indicator--counters .usa-step-indicator__segment:last-child:after,.usa-step-indicator--counters-sm .usa-step-indicator__segment:last-child:after{display:none}}.usa-step-indicator--counters .usa-step-indicator__segment--complete::before,.usa-step-indicator--counters-sm .usa-step-indicator__segment--complete::before{background-color:#162e51;-webkit-box-shadow:0 0 0 0.25rem white;box-shadow:0 0 0 0.25rem white;color:white}.usa-step-indicator--counters .usa-step-indicator__segment--current::before,.usa-step-indicator--counters-sm .usa-step-indicator__segment--current::before{background-color:#005ea2;-webkit-box-shadow:0 0 0 0.25rem white;box-shadow:0 0 0 0.25rem white;color:white}@media all and (min-width: 40em){.usa-step-indicator--counters .usa-step-indicator__segment-label,.usa-step-indicator--counters-sm .usa-step-indicator__segment-label{margin-top:calc(\n        (\n            (\n                2.5rem + 0.5rem\n              ) / 2\n          ) + 0.5rem\n      )}}@media all and (min-width: 40em){.usa-step-indicator--counters.usa-step-indicator--center .usa-step-indicator__segment:first-child:after,.usa-step-indicator--counters-sm.usa-step-indicator--center .usa-step-indicator__segment:first-child:after{left:50%;right:0;width:auto}.usa-step-indicator--counters.usa-step-indicator--center .usa-step-indicator__segment:last-child:after,.usa-step-indicator--counters-sm.usa-step-indicator--center .usa-step-indicator__segment:last-child:after{display:block;left:0;right:50%;width:auto}}@media all and (min-width: 40em){.usa-step-indicator--counters-sm .usa-step-indicator__segment{margin-top:calc(\n          (\n              (\n                  1.5rem -\n                    0.5rem\n                ) /\n                2\n            ) +\n            0.25rem\n        )}.usa-step-indicator--counters-sm .usa-step-indicator__segment:before{height:1.5rem;border-radius:99rem;width:1.5rem;font-size:0.93rem;padding:calc(0.25rem + 1px);top:calc((\n              1.5rem - 0.5rem\n            ) / -2)}.usa-step-indicator--counters-sm .usa-step-indicator__segment:last-child:after{display:none}}@media all and (min-width: 40em){.usa-step-indicator--counters-sm .usa-step-indicator__segment-label{margin-top:calc(\n        (\n            (\n                1.5rem + 0.5rem\n              ) / 2\n          ) + 0.5rem\n      )}}.usa-step-indicator--no-labels{margin-left:-1px;margin-right:-1px}.usa-step-indicator--no-labels .usa-step-indicator__segment{margin-top:0;margin-left:1px;margin-right:1px}.usa-step-indicator--no-labels .usa-step-indicator__segment:before{display:none}.usa-step-indicator--no-labels .usa-step-indicator__segment:last-child:after{display:block}.usa-step-indicator--no-labels .usa-step-indicator__heading{margin-top:1rem}.usa-step-indicator--no-labels .usa-step-indicator__segment-label{display:none}.usa-step-indicator--center{margin-left:-1px;margin-right:-1px}.usa-step-indicator--center .usa-step-indicator__segment{margin-left:1px;margin-right:1px}.usa-step-indicator--center .usa-step-indicator__segment:before{left:calc(50% - (\n                  2.5rem +\n                    0.25rem\n                ) / 2)}.usa-step-indicator--center .usa-step-indicator__segment-label{padding-left:0.5rem;padding-right:0.5rem;text-align:center}.usa-step-indicator--center.usa-step-indicator--no-labels .usa-step-indicator__segment:first-child:after{left:0}.usa-step-indicator--center.usa-step-indicator--no-labels .usa-step-indicator__segment:last-child:after{right:0}.usa-step-indicator--center.usa-step-indicator--counters-sm .usa-step-indicator__segment:before{left:calc(50% - (\n                    1.5rem +\n                      0.25rem\n                  ) / 2)}.usa-sr-only{position:absolute;left:-999em;right:auto}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}:host .usa-step-indicator__heading{display:-ms-flexbox;display:flex}:host .usa-step-indicator__heading-counter{-ms-flex-negative:0;flex-shrink:0}:host .usa-step-indicator__heading-text{text-wrap:wrap;padding-top:calc(-1.1ex + 1.25rem)}',VaSegmentedProgressBarStyle0=vaSegmentedProgressBarCss,VaSegmentedProgressBar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.enableAnalytics=!1,this.current=void 0,this.total=void 0,this.label=void 0,this.headerLevel=4,this.progressTerm="Step",this.labels=void 0,this.centeredLabels=void 0,this.counters=void 0,this.headingText=void 0,this.useDiv=void 0}componentDidRender(){this.enableAnalytics&&this.componentLibraryAnalytics.emit({componentName:"va-segmented-progress-bar",action:"change",details:{current:this.current,total:this.total}})}render(){const{current:e,total:t,labels:s,centeredLabels:a,counters:n,headingText:i,headerLevel:r,progressTerm:o,useDiv:c}=this;let l;s&&(l=s.split(";"));const d=Array.from({length:t},((e,t)=>t)),m=c?"div":`h${r}`,u=classnames({"usa-step-indicator":!0,"usa-step-indicator--center":a,"usa-step-indicator--counters":"default"===n,"usa-step-indicator--counters-sm":"small"===n}),p=t=>classnames({"usa-step-indicator__segment":!0,"usa-step-indicator__segment--complete":e>t+1,"usa-step-indicator__segment--current":e===t+1});return h(Host,null,h("div",{class:u},h("ol",{class:"usa-step-indicator__segments","aria-hidden":s?null:"true"},d.map((t=>h("li",{class:p(t),"aria-current":e===t+1?"step":null},s?h("span",{class:"usa-step-indicator__segment-label"},l[t],e!==t+1?h("span",{class:"usa-sr-only"},e>t+1?"completed":"not completed"):null):null)))),h("div",{class:"usa-step-indicator__header"},h(m,{class:"usa-step-indicator__heading"},h("span",{class:"usa-step-indicator__heading-counter"},h("span",{class:"usa-sr-only"},o),h("span",{class:"usa-step-indicator__current-step"},e),h("span",{class:"usa-step-indicator__total-steps"}," of ",t)),h("span",{class:"usa-step-indicator__heading-text"},s?l[e-1]:i)))))}static get style(){return VaSegmentedProgressBarStyle0}},[1,"va-segmented-progress-bar",{enableAnalytics:[4,"enable-analytics"],current:[2],total:[2],label:[1],headerLevel:[2,"header-level"],progressTerm:[1,"progress-term"],labels:[1],centeredLabels:[4,"centered-labels"],counters:[1],headingText:[1,"heading-text"],useDiv:[4,"use-div"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-segmented-progress-bar"].forEach((e=>{"va-segmented-progress-bar"===e&&(customElements.get(e)||customElements.define(e,VaSegmentedProgressBar$1))}))}const VaSegmentedProgressBar=VaSegmentedProgressBar$1,defineCustomElement=defineCustomElement$1;export{VaSegmentedProgressBar,defineCustomElement};
+import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";const vaSegmentedProgressBarCss='.sr-only{border:0;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}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,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}.usa-step-indicator{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.1;background-color:white;margin-bottom:2rem;margin-left:-1px;margin-right:-1px}@media all and (min-width: 40em){.usa-step-indicator{margin-left:0;margin-right:0}}.usa-step-indicator__segments{counter-reset:usa-step-indicator;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0}.usa-step-indicator__segment{-ms-flex:1 1 0%;flex:1 1 0%;counter-increment:usa-step-indicator;margin-left:1px;margin-right:1px;max-width:15rem;min-height:0.5rem;position:relative}.usa-step-indicator__segment:after{background-color:#919191;content:"";display:block;height:0.5rem;left:0;position:absolute;right:0;top:0}@media all and (min-width: 40em){.usa-step-indicator__segment:after{height:0.5rem}}.usa-step-indicator__segment--complete::after{background-color:#162e51}.usa-step-indicator__segment--complete .usa-step-indicator__segment-label{color:#162e51}.usa-step-indicator__segment--current::after{background-color:#005ea2}.usa-step-indicator__segment--current .usa-step-indicator__segment-label{color:#005ea2;font-weight:700}.usa-step-indicator__segment-label{display:none}@media all and (min-width: 40em){.usa-step-indicator__segment-label{color:#565c65;display:block;font-size:1.06rem;margin-top:calc(\n      0.5rem + 0.5rem\n    );padding-right:2rem;text-align:left}}.usa-step-indicator__header{-ms-flex-align:baseline;align-items:baseline;display:-ms-flexbox;display:flex}.usa-step-indicator__heading{color:#1b1b1b;font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.13rem;font-weight:700;margin:1rem 0 0}@media all and (min-width: 40em){.usa-step-indicator__heading{font-size:1.46rem;margin-top:2rem}}.usa-step-indicator__current-step{height:2.5rem;border-radius:99rem;width:2.5rem;font-weight:normal;-webkit-font-feature-settings:"tnum" 1, "kern" 1;font-feature-settings:"tnum" 1, "kern" 1;background-color:#005ea2;color:white;display:inline-block;padding:calc((2.5rem - (2ex * 1.1)) * 0.5);text-align:center}.usa-step-indicator__total-steps{font-weight:normal;-webkit-font-feature-settings:"tnum" 1, "kern" 1;font-feature-settings:"tnum" 1, "kern" 1;color:#005ea2;margin-right:0.5rem}@media all and (min-width: 40em){.usa-step-indicator--counters .usa-step-indicator__segment,.usa-step-indicator--counters-sm .usa-step-indicator__segment{margin-left:0;margin-right:0;margin-top:calc(\n          (\n              (\n                  2.5rem -\n                    0.5rem\n                ) /\n                2\n            ) +\n            0.25rem\n        )}.usa-step-indicator--counters .usa-step-indicator__segment:before,.usa-step-indicator--counters-sm .usa-step-indicator__segment:before{height:2.5rem;border-radius:99rem;width:2.5rem;-webkit-font-feature-settings:"tnum" 1, "kern" 1;font-feature-settings:"tnum" 1, "kern" 1;background-color:white;-webkit-box-shadow:inset 0 0 0 0.25rem #919191, 0 0 0 0.25rem white;box-shadow:inset 0 0 0 0.25rem #919191, 0 0 0 0.25rem white;color:#565c65;content:counter(usa-step-indicator);display:block;font-weight:700;left:0;line-height:0.9;padding:calc((2.5rem - (2ex * 0.9)) * 0.5);position:absolute;text-align:center;top:calc((\n              2.5rem - 0.5rem\n            ) / -2);z-index:100}.usa-step-indicator--counters .usa-step-indicator__segment:last-child:after,.usa-step-indicator--counters-sm .usa-step-indicator__segment:last-child:after{display:none}}.usa-step-indicator--counters .usa-step-indicator__segment--complete::before,.usa-step-indicator--counters-sm .usa-step-indicator__segment--complete::before{background-color:#162e51;-webkit-box-shadow:0 0 0 0.25rem white;box-shadow:0 0 0 0.25rem white;color:white}.usa-step-indicator--counters .usa-step-indicator__segment--current::before,.usa-step-indicator--counters-sm .usa-step-indicator__segment--current::before{background-color:#005ea2;-webkit-box-shadow:0 0 0 0.25rem white;box-shadow:0 0 0 0.25rem white;color:white}@media all and (min-width: 40em){.usa-step-indicator--counters .usa-step-indicator__segment-label,.usa-step-indicator--counters-sm .usa-step-indicator__segment-label{margin-top:calc(\n        (\n            (\n                2.5rem + 0.5rem\n              ) / 2\n          ) + 0.5rem\n      )}}@media all and (min-width: 40em){.usa-step-indicator--counters.usa-step-indicator--center .usa-step-indicator__segment:first-child:after,.usa-step-indicator--counters-sm.usa-step-indicator--center .usa-step-indicator__segment:first-child:after{left:50%;right:0;width:auto}.usa-step-indicator--counters.usa-step-indicator--center .usa-step-indicator__segment:last-child:after,.usa-step-indicator--counters-sm.usa-step-indicator--center .usa-step-indicator__segment:last-child:after{display:block;left:0;right:50%;width:auto}}@media all and (min-width: 40em){.usa-step-indicator--counters-sm .usa-step-indicator__segment{margin-top:calc(\n          (\n              (\n                  1.5rem -\n                    0.5rem\n                ) /\n                2\n            ) +\n            0.25rem\n        )}.usa-step-indicator--counters-sm .usa-step-indicator__segment:before{height:1.5rem;border-radius:99rem;width:1.5rem;font-size:0.93rem;padding:calc(0.25rem + 1px);top:calc((\n              1.5rem - 0.5rem\n            ) / -2)}.usa-step-indicator--counters-sm .usa-step-indicator__segment:last-child:after{display:none}}@media all and (min-width: 40em){.usa-step-indicator--counters-sm .usa-step-indicator__segment-label{margin-top:calc(\n        (\n            (\n                1.5rem + 0.5rem\n              ) / 2\n          ) + 0.5rem\n      )}}.usa-step-indicator--no-labels{margin-left:-1px;margin-right:-1px}.usa-step-indicator--no-labels .usa-step-indicator__segment{margin-top:0;margin-left:1px;margin-right:1px}.usa-step-indicator--no-labels .usa-step-indicator__segment:before{display:none}.usa-step-indicator--no-labels .usa-step-indicator__segment:last-child:after{display:block}.usa-step-indicator--no-labels .usa-step-indicator__heading{margin-top:1rem}.usa-step-indicator--no-labels .usa-step-indicator__segment-label{display:none}.usa-step-indicator--center{margin-left:-1px;margin-right:-1px}.usa-step-indicator--center .usa-step-indicator__segment{margin-left:1px;margin-right:1px}.usa-step-indicator--center .usa-step-indicator__segment:before{left:calc(50% - (\n                  2.5rem +\n                    0.25rem\n                ) / 2)}.usa-step-indicator--center .usa-step-indicator__segment-label{padding-left:0.5rem;padding-right:0.5rem;text-align:center}.usa-step-indicator--center.usa-step-indicator--no-labels .usa-step-indicator__segment:first-child:after{left:0}.usa-step-indicator--center.usa-step-indicator--no-labels .usa-step-indicator__segment:last-child:after{right:0}.usa-step-indicator--center.usa-step-indicator--counters-sm .usa-step-indicator__segment:before{left:calc(50% - (\n                    1.5rem +\n                      0.25rem\n                  ) / 2)}.usa-sr-only{position:absolute;left:-999em;right:auto}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}:host .usa-step-indicator__heading{display:-ms-flexbox;display:flex}:host .usa-step-indicator__heading-counter{-ms-flex-negative:0;flex-shrink:0}:host .usa-step-indicator__heading-text{text-wrap:wrap;padding-top:calc(-1.1ex + 1.25rem)}',VaSegmentedProgressBarStyle0=vaSegmentedProgressBarCss,VaSegmentedProgressBar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.enableAnalytics=!1,this.current=void 0,this.total=void 0,this.label=void 0,this.headerLevel=4,this.progressTerm="Step",this.labels=void 0,this.centeredLabels=void 0,this.counters=void 0,this.headingText=void 0,this.useDiv=void 0}componentDidRender(){this.enableAnalytics&&this.componentLibraryAnalytics.emit({componentName:"va-segmented-progress-bar",action:"change",details:{current:this.current,total:this.total}})}render(){const{current:e,total:t,labels:s,centeredLabels:a,counters:n,headingText:i,headerLevel:r,progressTerm:o,useDiv:c}=this;let l;s&&(l=s.split(";"));const d=Array.from({length:t},((e,t)=>t)),m=c?"div":`h${r}`,u=classnames({"usa-step-indicator":!0,"usa-step-indicator--center":a,"usa-step-indicator--counters":"default"===n,"usa-step-indicator--counters-sm":"small"===n}),p=t=>classnames({"usa-step-indicator__segment":!0,"usa-step-indicator__segment--complete":e>t+1,"usa-step-indicator__segment--current":e===t+1});return h(Host,null,h("div",{class:u},h("ol",{class:"usa-step-indicator__segments","aria-hidden":s?null:"true"},d.map((t=>h("li",{class:p(t),"aria-current":e===t+1?"step":null},s?h("span",{class:"usa-step-indicator__segment-label"},l[t],e!==t+1?h("span",{class:"usa-sr-only"},e>t+1?"completed":"not completed"):null):null)))),h("div",{class:"usa-step-indicator__header"},h(m,{class:"usa-step-indicator__heading"},h("span",{class:"usa-step-indicator__heading-counter"},h("span",{class:"usa-sr-only"},"You are on ",o),h("span",{class:"usa-step-indicator__current-step"},e),h("span",{class:"usa-step-indicator__total-steps"}," of ",t)),h("span",{class:"usa-step-indicator__heading-text"},s?l[e-1]:i)))))}static get style(){return VaSegmentedProgressBarStyle0}},[1,"va-segmented-progress-bar",{enableAnalytics:[4,"enable-analytics"],current:[2],total:[2],label:[1],headerLevel:[2,"header-level"],progressTerm:[1,"progress-term"],labels:[1],centeredLabels:[4,"centered-labels"],counters:[1],headingText:[1,"heading-text"],useDiv:[4,"use-div"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-segmented-progress-bar"].forEach((e=>{"va-segmented-progress-bar"===e&&(customElements.get(e)||customElements.define(e,VaSegmentedProgressBar$1))}))}const VaSegmentedProgressBar=VaSegmentedProgressBar$1,defineCustomElement=defineCustomElement$1;export{VaSegmentedProgressBar,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": "52.0.0",
+  "version": "52.1.0",
   "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": "20.0.0",
+    "@department-of-veterans-affairs/web-components": "20.1.0",
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "react-focus-on": "^3.5.1",