@nanoporetech-digital/components 2.12.0 → 2.13.1

package/dist/custom-elements/index.js

@@ -2642,10 +2642,10 @@ async function nanoShowToast(message, position = 'tr', icon, alertOptions, butto
 /**
  * `nano-alert` helper to create alert notifications imperatively.
  * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`
- * @param buttons - { classes: string; content: string; handler: () => {} }[]
+ * @param buttons
  * @param icon - name for the `nano-icon`
  * @param label - descriptive label for assitive technology
- * @param alertOptions - { color: Color, duration: number, closable: boolean }
+ * @param alertOptions
  * @returns `Promise<void>`
  */
 function nanoShowAlert(message, buttons = [], label, icon = 'light/info-circle', alertOptions = {}) {
@@ -13225,8 +13225,15 @@ let FieldValidator = class extends H {
     this.nanoSubmit = createEvent(this, "nanoSubmit", 7);
     this.nanoInvalid = createEvent(this, "nanoInvalid", 7);
     this.submitted = false;
-    this.fields = [];
-    // annoyingly, whenever we attempt to checkValidty it fires `invalid` events.
+    this.allFields = [];
+    this.nanoFieldSelector = `
+    nano-input,
+    nano-select,
+    nano-file-upload,
+    nano-date-input,
+    nano-checkbox
+  `;
+    // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.
     // this is used to prevent infinite loops / multiple calls
     this.internalValidate = false;
     // Public API
@@ -13235,12 +13242,27 @@ let FieldValidator = class extends H {
     /** Tries to scroll to the first invalid field on submit */
     this.scrollToInvalid = true;
     this._dirty = false;
+    /** By default, `nano-field-validator` will also track all native form field elements.
+     * You can add extra web-component form fields to listen to
+     * (as long as they match the standard form field spec) by using the `fieldSelector` prop.
+     */
+    this.extraFieldSelector = 'input, select, textarea';
     // Event handlers
-    /** Fired whenever store values change and potentially checks validity */
+    /**
+     * Fired whenever store values change and potentially checks validity
+     * @param key - the key of the store that's just changed
+     * @param newVal - the incoming, new value
+     */
     this.handleStoreChange = async (key, newVal) => {
-      const found = this.fields.find((field) => field.name === key);
-      if (found && found.value !== newVal)
+      const found = this.allFields.find((field) => this.getName(field) === key);
+      // field update has come programmatically (not from ui),
+      // so let's update the underlying ui field
+      if ((found &&
+        found.tagName === 'NANO-FILE-UPLOAD' &&
+        !this.fileStateEqual(key, found)) ||
+        (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal)) {
         this.storeToFields([found]);
+      }
       if (this.validateOn === 'dirty' && this.dirty) {
         this.internalValidate = true;
         await this.validateAllFields();
@@ -13249,17 +13271,40 @@ let FieldValidator = class extends H {
       }
       this.nanoPayloadChange.emit(this._store.state);
     };
-    /** Handles field value changes and passes to store */
+    /**
+     * Handles nano field value changes and passes to store
+     * @param ev - the incoming change event
+     */
     this.handleFieldChange = (ev) => {
+      if (!this.nanoFields.includes(ev.target))
+        return;
       this._dirty = true;
       this.fieldsToStore([ev.target]);
     };
-    /** Handles default field validation events */
+    /**
+     * Handles non-nano field value changes and passes to store
+     * @param ev - the incoming change event
+     */
+    this.handlePlainFieldChange = (ev) => {
+      if (!this.plainFields.includes(ev.target))
+        return;
+      this.fieldsToStore([ev.target]);
+    };
+    /**
+     * Handles default field validation events
+     * @param ev - the invalid event
+     */
     this.handleFormInvalid = async (ev) => {
-      ev.preventDefault();
+      // if it's a non-nano field, we'll let default html5 validation do it's thing
+      if (!this.plainFields.includes(ev.target)) {
+        ev.preventDefault();
+      }
       this._valid = false;
+      // whenever `checkValidity` is called, this handler is in-turn called.
+      // this flag is used to stop infinite loops
       if (this.internalValidate)
         return;
+      // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now
       if (this.validateOn === 'submitThenDirty')
         this.validateOn = 'dirty';
       this.submitted = true;
@@ -13279,7 +13324,10 @@ let FieldValidator = class extends H {
       this.scrollToFirstInvalid();
       this.nanoInvalid.emit();
     };
-    /** stops default form submission, checks if valid, then submits manually  */
+    /**
+     * stops default form submission, checks if valid, then submits manually
+     * @param e - a submit event from the nested form element
+     */
     this.handleSubmit = async (e) => {
       e.preventDefault();
       if (this.validateOn === 'submitThenDirty')
@@ -13304,6 +13352,7 @@ let FieldValidator = class extends H {
     return this._activeForm;
   }
   set activeForm(form) {
+    // manages event listners on whatever form is used (slotted on created here)
     if (!form)
       return;
     if (this._activeForm) {
@@ -13314,7 +13363,7 @@ let FieldValidator = class extends H {
   }
   /** Sync up validateOn with all fields */
   validateOnChange() {
-    this.fields.forEach((field) => {
+    this.nanoFields.forEach((field) => {
       if (field.tagName === 'NANO-CHECKBOX') {
         const cbg = field.closest('nano-checkbox-group');
         if (cbg)
@@ -13342,7 +13391,7 @@ let FieldValidator = class extends H {
   get payload() {
     return this._store.state;
   }
-  /** Returns true if validation errors will be displayed to the user */
+  /** Returns true if validation errors will be displayed to the user. @readonly */
   get showValidation() {
     return (this.validateOn === 'dirty' && this.dirty) || this.submitted;
   }
@@ -13359,26 +13408,58 @@ let FieldValidator = class extends H {
   ```
    */
   get validationState() {
+    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec
+    // this is big and ugly.
+    // why? Cos' it must unify checking validity state for both
+    // `nano-...` and plain form fields.
     const validationState = [];
-    this.fields.forEach(async (field) => {
-      const found = validationState.find((v) => v.name === field.name);
+    this.allFields.forEach(async (field) => {
+      const found = validationState.find((v) => v.name === this.getName(field));
+      let pf;
+      let nf;
       if (found) {
-        found.validityMessage = field.validityMessage.length
-          ? field.validityMessage
-          : found.validityMessage;
+        if (field.validationMessage) {
+          pf = field;
+          found.validityMessage = pf.validationMessage.length
+            ? pf.validationMessage
+            : found.validityMessage;
+          this.internalValidate = true;
+          if (found.valid && !pf.checkValidity())
+            found.valid = false;
+          this.internalValidate = false;
+        }
+        else if (field.validityMessage) {
+          nf = field;
+          found.validityMessage = nf.validityMessage.length
+            ? nf.validityMessage
+            : nf.validityMessage;
+          if (found.valid && nf.invalid)
+            found.valid = false;
+        }
         if (!found.fields.find((f) => f === field))
           found.fields.push(field);
-        if (found.valid && field.invalid)
-          found.valid = false;
-        return;
+      }
+      let valid;
+      let validityMessage;
+      if (field.checkValidity) {
+        pf = field;
+        this.internalValidate = true;
+        valid = pf.checkValidity();
+        this.internalValidate = false;
+        validityMessage = pf.validationMessage;
+      }
+      else {
+        nf = field;
+        valid = !nf.invalid;
+        validityMessage = nf.validityMessage;
       }
       validationState.push({
         fields: [field],
-        name: field.name,
-        valid: !field.invalid,
-        value: this._store.state[field.name],
+        name: this.getName(field),
+        value: this._store.state[this.getName(field)],
         dirty: false,
-        validityMessage: field.validityMessage,
+        valid,
+        validityMessage,
       });
     });
     return validationState;
@@ -13390,6 +13471,24 @@ let FieldValidator = class extends H {
   async setStore(state) {
     Object.entries(state).forEach(([key, val]) => (this.store.state[key] = val));
   }
+  /**
+   * Sets custom validity for all / some form fields.
+   * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.
+   */
+  async setCustomValidity(validity) {
+    return await Promise.all(Object.entries(validity).map(async ([key, err]) => {
+      const field = this.allFields.find((f) => this.getName(f) === key);
+      if (!!field)
+        await this.setFieldError(field, err);
+    }));
+  }
+  /**
+   * Clear all custom validation.
+   * @param validity
+   */
+  async resetValidity() {
+    return await Promise.all(this.allFields.map(async (field) => await this.setFieldError(field, '')));
+  }
   // private methods
   attachSlotObserver() {
     if (!!this.mo)
@@ -13407,118 +13506,149 @@ let FieldValidator = class extends H {
       subtree: true,
     });
   }
+  /**
+   * During spec tests, mockelement props aren't set - only attributes.
+   * This irons out that kink
+   * @param field
+   * @returns
+   */
+  getName(field) {
+    return field.name || field.getAttribute('name');
+  }
   /** Checks for new `nano-...` fields and adds them to our watch array and value store */
   setupFields() {
-    let fields = Array.from(this.host.querySelectorAll(`
-        nano-input,
-        nano-select,
-        nano-file-upload,
-        nano-date-input,
-        nano-checkbox
-      `));
-    fields = fields.filter((f) => !!f.name && !!f.name.length);
+    let nanoFields = Array.from(this.host.querySelectorAll(this.nanoFieldSelector));
+    let plainFields = Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((e) => !e.closest(this.nanoFieldSelector));
+    nanoFields = nanoFields.filter((f) => !!this.getName(f) && !!this.getName(f).length);
+    plainFields = plainFields.filter((f) => !!this.getName(f) && !!this.getName(f).length);
     // do we have any currently un-watched fields?
-    if (!fields.filter((f) => !this.fields.includes(f)).length)
+    if (![...nanoFields, ...plainFields].filter((f) => !this.allFields.includes(f)).length)
       return;
     // setup the initial store state / refresh on new fields
-    this.fields = fields;
-    this.storeToFields(this.fields);
+    this.nanoFields = nanoFields;
+    this.plainFields = plainFields;
+    this.allFields = [...nanoFields, ...plainFields];
+    this.storeToFields(this.allFields);
     this.validateOnChange();
-    this.fieldsToStore(this.fields);
+    this.fieldsToStore(this.allFields);
     this.nanoPayloadChange.emit(this._store.state);
   }
   storeToFields(fields) {
     fields.forEach((field) => {
-      const fieldName = field.name;
+      var _a;
+      const fieldName = this.getName(field);
       if (!fieldName.length ||
         typeof this._store.state[fieldName] === 'undefined')
         return;
-      switch (field.tagName) {
-        case 'NANO-CHECKBOX':
-          let cb = field;
-          if (cb.type === 'radio' ||
-            cb.type === 'segment' ||
-            cb.type === 'segment-pill') {
-            if (this._store.state[fieldName] === cb.value)
-              cb.checked = true;
-            else
-              cb.checked = false;
-          }
-          else if (Array.isArray(this._store.state[fieldName])) {
-            if (this._store.state[fieldName].includes(cb.value))
-              cb.checked = true;
-            else
-              cb.checked = false;
-          }
-          else {
-            if (this._store.state[fieldName] === cb.value)
-              cb.checked = true;
-            else
-              cb.checked = false;
-          }
-          break;
-        case 'NANO-FILE-UPLOAD':
-          field.files =
-            this._store.state[fieldName];
-          break;
-        default:
-          field.value = this._store.state[fieldName];
-          break;
+      if (field.tagName === 'NANO-CHECKBOX' ||
+        ['radio', 'checkbox'].includes(field.type)) {
+        let cb = field;
+        if (cb.type === 'radio' ||
+          cb.type === 'segment' ||
+          cb.type === 'segment-pill') {
+          // single radio type control
+          if (this._store.state[fieldName] === cb.value)
+            cb.checked = true;
+          else
+            cb.checked = false;
+        }
+        else if (Array.isArray(this._store.state[fieldName])) {
+          // multiple checkbox like controls
+          if (this._store.state[fieldName].includes(cb.value))
+            cb.checked = true;
+          else
+            cb.checked = false;
+        }
+        else {
+          // single checkbox like control
+          if (this._store.state[fieldName] === cb.value)
+            cb.checked = true;
+          else
+            cb.checked = false;
+        }
+        return;
       }
+      if (field.tagName === 'NANO-FILE-UPLOAD') {
+        const ff = field;
+        // this can only work if the field is empty rn... a one-time deal
+        if (!((_a = ff.files) === null || _a === void 0 ? void 0 : _a.length))
+          ff.files = this._store.state[fieldName];
+        return;
+      }
+      // default
+      field.value = this._store.state[fieldName];
     });
   }
   /** Loops through all `nano-...` fields and extracts their values into our store */
   fieldsToStore(fields) {
     fields.forEach((field) => {
-      const fieldName = field.name;
+      const fieldName = this.getName(field);
       if (!fieldName.length)
         return;
-      switch (field.tagName) {
-        case 'NANO-CHECKBOX':
-          let cb = field;
-          if (cb.type === 'radio' ||
-            cb.type === 'segment' ||
-            cb.type === 'segment-pill') {
-            // radio type control - only one can be checked
-            if (cb.checked)
-              this._store.state[fieldName] = cb.value;
-            else if (!cb.checked &&
-              (cb.value === this._store.state[fieldName] ||
-                !this._store.state[fieldName]))
-              this._store.state[fieldName] = '';
-          }
-          else if (this.fields.filter((f) => f.name === fieldName && f.tagName === 'NANO-CHECKBOX').length > 1) {
-            // multiple checkbox type control
-            const currentArr = Array.isArray(this._store.state[fieldName])
-              ? this._store.state[fieldName]
-              : [];
-            if (cb.checked) {
-              if (!this._store.state[fieldName].includes(cb.value)) {
-                this._store.state[fieldName] = [...currentArr, cb.value];
-              }
-            }
-            else {
-              this._store.state[fieldName] = currentArr.filter((v) => v !== cb.value);
+      if (field.tagName === 'NANO-CHECKBOX' ||
+        ['radio', 'checkbox'].includes(field.type)) {
+        let cb = field;
+        if (cb.type === 'radio' ||
+          cb.type === 'segment' ||
+          cb.type === 'segment-pill') {
+          // radio type control - only one can be checked
+          if (cb.checked)
+            this._store.state[fieldName] = cb.value;
+        }
+        else if (this.allFields.filter((f) => !!this.getName(field) &&
+          (f.tagName === 'NANO-CHECKBOX' ||
+            f.type === 'checkbox')).length > 1) {
+          // multiple checkbox type control
+          const currentArr = Array.isArray(this._store.state[fieldName])
+            ? this._store.state[fieldName]
+            : [];
+          if (cb.checked) {
+            // checked
+            if (!this._store.state[fieldName].includes(cb.value)) {
+              this._store.state[fieldName] = [...currentArr, cb.value];
             }
           }
           else {
-            // single checkbox - on or off
-            if (cb.checked)
-              this._store.state[fieldName] = cb.value;
-            else
-              this._store.state[fieldName] = '';
+            // unchecked
+            this._store.state[fieldName] = currentArr.filter((v) => v !== cb.value);
           }
-          break;
-        case 'NANO-FILE-UPLOAD':
-          this._store.state[fieldName] = field.files;
-          break;
-        default:
-          this._store.state[fieldName] = field.value;
-          break;
+        }
+        else {
+          // single checkbox - on or off
+          if (cb.checked)
+            this._store.state[fieldName] = cb.value;
+          else
+            this._store.state[fieldName] = '';
+        }
+        return;
+      }
+      if (field.tagName === 'NANO-FILE-UPLOAD') {
+        const ff = field;
+        if (!this.fileStateEqual(fieldName, ff))
+          this._store.state[fieldName] = ff.files;
+        return;
       }
+      // default
+      this._store.state[fieldName] = field.value;
     });
   }
-  /** Checks for user defined validations */
+  /**
+   * Tries to ascertain whether the current model
+   * value is the same as the `nano-file-upload` value
+   * @param fieldName - the key to access from the data store
+   * @param field - the nano-file-upload field to assess against
+   * @returns true for equal, false for not equal
+   */
+  fileStateEqual(fieldName, field) {
+    return (JSON.stringify(this._store.state[fieldName]) ===
+      JSON.stringify(field.files) ||
+      this._store.state[fieldName] == field.files);
+  }
+  /**
+   * Checks for user defined validations
+   * @param key - current key of the data model to validate
+   * @param newVal - the newly set, incoming value to validate
+   */
   async validate(key, newVal) {
     if (!this.validation)
       return;
@@ -13531,21 +13661,33 @@ let FieldValidator = class extends H {
     // collection loop into a promise
     await Promise.all(Object.entries(res).map(async ([key, o]) => {
       // switch on/off validation messages
-      const field = this.fields.find((f) => f.name === key);
+      const field = this.allFields.find((f) => this.getName(f) === key);
       let validityTarget = field;
       if (field.tagName === 'NANO-CHECKBOX') {
+        // if we have a checkbox-group, set the validation message there
         const cbg = field.closest('nano-checkbox-group');
         validityTarget = cbg || field;
       }
-      // status is now valid - clear the error
-      if (validityTarget.validityMessage === o.msg && o.valid)
+      if ((validityTarget.validityMessage ||
+        validityTarget.validationMessage) === o.msg &&
+        o.valid) {
+        // status is now valid - clear the error
         await this.setFieldError(validityTarget, '');
-      // status is invalid. Set the error
+      }
       else if (!o.valid) {
+        // status is invalid. Set the error
         await this.setFieldError(validityTarget, o.msg);
       }
     }));
   }
+  /** Loops through all store entries and checks custom validation */
+  async validateAllFields() {
+    // This forces our loop to `await` and finish sequentially ... silly async stencil methods
+    await Object.entries(this._store.state).reduce(async (memo, [key, value]) => {
+      await memo;
+      await this.validate(key, value);
+    }, undefined);
+  }
   /**
    * Utility to smooth out setting error messages
    * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)
@@ -13553,18 +13695,13 @@ let FieldValidator = class extends H {
    * @param msg
    */
   async setFieldError(field, msg) {
-    if (field['showError'])
+    if (field['showError']) {
       await field.showError(msg);
-    else
+    }
+    else if (field['setError'])
       await field.setError(msg);
-  }
-  /** Loops through all store entries and checks field validity */
-  async validateAllFields() {
-    // This forces our loop to `await` and finish sequentially ... silly async stencil methods
-    await Object.entries(this._store.state).reduce(async (memo, [key, value]) => {
-      await memo;
-      await this.validate(key, value);
-    }, undefined);
+    else
+      field.setCustomValidity(msg);
   }
   scrollToFirstInvalid() {
     if (!this.scrollToInvalid)
@@ -13593,17 +13730,21 @@ let FieldValidator = class extends H {
     requestAnimationFrame(() => {
       this.setupFields();
       this.attachSlotObserver();
-      this._store.on('set', (key, value) => this.handleStoreChange(key, value));
       this.host.addEventListener('nanoChange', this.handleFieldChange);
+      this.host.addEventListener('input', this.handlePlainFieldChange);
+      this.host.addEventListener('change', this.handlePlainFieldChange);
       this.host.addEventListener('submit', this.handleSubmit);
+      this._store.on('set', this.handleStoreChange);
     });
   }
   disconnectedCallback() {
     if (this.mo)
       this.mo.disconnect();
-    this._store.reset();
     this.host.removeEventListener('nanoChange', this.handleFieldChange);
+    this.host.removeEventListener('input', this.handlePlainFieldChange);
+    this.host.removeEventListener('change', this.handlePlainFieldChange);
     this.host.removeEventListener('submit', this.handleSubmit);
+    this._store.reset();
     if (this.activeForm)
       this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
   }
@@ -13613,11 +13754,12 @@ let FieldValidator = class extends H {
   get host() { return this; }
   static get watchers() { return {
     "userForm": ["userFormChange"],
-    "validateOn": ["validateOnChange"]
+    "validateOn": ["validateOnChange"],
+    "extraFieldSelector": ["attachSlotObserver"]
   }; }
 };
 
-const fileUploadCss = ".sc-nano-file-upload-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-height:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0, 116, 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239, 65, 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1em);--btn-padding-end:var(--nano-btn-padding-end, 1em)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) / 2);margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__more.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;width:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-height:var(--drop-height);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:0.9em;position:relative;-webkit-transition:background-color 0.15s ease-in-out;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgba(var(--drop-border-tint), 0.5);border-style:dashed;top:0;bottom:0;left:0;right:0;-webkit-transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgba(var(--drop-border--invalid), 1)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{top:5px;bottom:5px;left:5px;right:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgba(var(--drop-border-tint), 1);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;top:-4px}.file-upload__list-item.sc-nano-file-upload{width:100%;margin:0 0 2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:hideListItem 0.3s ease-in-out forwards;animation:hideListItem 0.3s ease-in-out forwards}@-webkit-keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{-webkit-animation:showListItem 0.3s ease-in-out forwards;animation:showListItem 0.3s ease-in-out forwards}@-webkit-keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px 5px;margin-right:2px;display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgba(var(--drop-border--invalid), 1)}.file-upload__button.sc-nano-file-upload{margin:0;padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;-webkit-transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;padding-left:var(--nano-btn-padding-start, 1rem);padding-right:var(--nano-btn-padding-end, 1rem);padding-top:var(--nano-btn-padding-top, 0.5rem);padding-bottom:var(--nano-btn-padding-bottom, 0.5rem);-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5rem);font-weight:500;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-width:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--nano-btn-padding-start, 1rem);padding-inline-start:var(--nano-btn-padding-start, 1rem);-webkit-padding-end:var(--nano-btn-padding-end, 1rem);padding-inline-end:var(--nano-btn-padding-end, 1rem)}}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0.5rem;margin-right:0;font-size:var(--nano-btn-icon-size, 1rem);vertical-align:middle;margin-top:-0.188rem;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0;margin-right:0.5rem}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}}.file-upload__button.sc-nano-file-upload:hover:not(.file-upload__button--disabled){-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){-webkit-box-shadow:none;box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{-webkit-box-shadow:none;box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0.4rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.4rem;margin-inline-start:0.4rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}";
+const fileUploadCss = ".sc-nano-file-upload-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-height:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0, 116, 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239, 65, 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1em);--btn-padding-end:var(--nano-btn-padding-end, 1em)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) / 2);margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__more.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;width:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-height:var(--drop-height);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:0.9em;position:relative;-webkit-transition:background-color 0.15s ease-in-out;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgba(var(--drop-border-tint), 0.5);border-style:dashed;top:0;bottom:0;left:0;right:0;-webkit-transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgba(var(--drop-border--invalid), 1)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{top:5px;bottom:5px;left:5px;right:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgba(var(--drop-border-tint), 1);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;top:-4px}.file-upload__list-item.sc-nano-file-upload{width:100%;margin:0 0 2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:hideListItem 0.3s ease-in-out forwards;animation:hideListItem 0.3s ease-in-out forwards}@-webkit-keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{-webkit-animation:showListItem 0.3s ease-in-out forwards;animation:showListItem 0.3s ease-in-out forwards}@-webkit-keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px 5px;margin-right:2px;display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgba(var(--drop-border--invalid), 1)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;-webkit-transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;padding-left:var(--nano-btn-padding-start, 1rem);padding-right:var(--nano-btn-padding-end, 1rem);padding-top:var(--nano-btn-padding-top, 0.5rem);padding-bottom:var(--nano-btn-padding-bottom, 0.5rem);-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5rem);font-weight:500;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-width:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--nano-btn-padding-start, 1rem);padding-inline-start:var(--nano-btn-padding-start, 1rem);-webkit-padding-end:var(--nano-btn-padding-end, 1rem);padding-inline-end:var(--nano-btn-padding-end, 1rem)}}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0.5rem;margin-right:0;font-size:var(--nano-btn-icon-size, 1rem);vertical-align:middle;margin-top:-0.188rem;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0;margin-right:0.5rem}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}}.file-upload__button.sc-nano-file-upload:hover:not(.file-upload__button--disabled){-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){-webkit-box-shadow:none;box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{-webkit-box-shadow:none;box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0.4rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.4rem;margin-inline-start:0.4rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}";
 
 let fileInputIds = 0;
 let getDataTransfer = () => new DataTransfer();
@@ -16783,6 +16925,7 @@ let Input = class extends H {
       this.nativeInput.dispatchEvent(event);
     };
     this.validate = debounce$2(this.validate, 50);
+    this.handleBlur = this.handleBlur.bind(this);
   }
   get nativeInputWrap() {
     return this._nativeInputWrap;
@@ -16868,6 +17011,15 @@ let Input = class extends H {
       this.nativeInput.click();
     }
   }
+  /**
+   * Sets focus and select the text on the specified `nano-input`. Use this method instead of the global
+   * `input.select()`.
+   */
+  async select() {
+    if (this.nativeInput) {
+      this.nativeInput.select();
+    }
+  }
   /**
    * Returns the native `<input>` element used under the hood.
    */
@@ -16897,11 +17049,14 @@ let Input = class extends H {
     const kev = e;
     let target;
     raf(() => {
-      if (kev.key) {
+      if (e instanceof KeyboardEvent && kev.key) {
         if (kev.key !== 'Tab')
           return;
         target = document.activeElement;
       }
+      else if (e instanceof FocusEvent) {
+        target = document.activeElement;
+      }
       else
         target = e.target;
       if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
@@ -17004,10 +17159,10 @@ let Input = class extends H {
       disabled,
       clearControl: this.clearInput,
     }))(this);
-    return (h$1(Host$1, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, h$1(FormControlWrap, Object.assign({}, wrapOptions), h$1(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (h$1("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h$1("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+    return (h$1(Host$1, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, h$1(FormControlWrap, Object.assign({}, wrapOptions), h$1(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (h$1("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h$1("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
         'input__native-ctrl': true,
         input__resizable: this.resize === 'true',
-      }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate }))), h$1("slot", null))));
+      }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur }))), h$1("slot", null))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -18892,6 +19047,7 @@ let Select = class extends H {
    */
   // eslint-disable-next-line @stencil/no-unused-watch
   valueChanged() {
+    this.customValidate();
     if (this.onInit) {
       if (this.multiple)
         this.currInsertIndex = this.value.length - 1;
@@ -25058,7 +25214,7 @@ const NanoDetails = /*@__PURE__*/proxyCustomElement(Details, [1,"nano-details",{
 const NanoDialog = /*@__PURE__*/proxyCustomElement(Dialog, [1,"nano-dialog",{"showRibbon":[4,"show-ribbon"],"open":[1540],"label":[1],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"noUserDismiss":[4,"no-user-dismiss"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"hoist":[4],"isVisible":[32],"noDismiss":[32],"hasFooter":[32]}]);
 const NanoDrawer = /*@__PURE__*/proxyCustomElement(Drawer, [1,"nano-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"type":[1],"contentSelector":[1,"content-selector"],"hasFooter":[32],"isVisible":[32]}]);
 const NanoDropdown = /*@__PURE__*/proxyCustomElement(Dropdown, [1,"nano-dropdown",{"autoOpen":[4,"auto-open"],"open":[1540],"closeOnSelect":[4,"close-on-select"],"containingElement":[1040],"tetherTo":[16],"placement":[1],"distance":[2],"skidding":[2],"hoist":[4],"dialogTitle":[1,"dialog-title"]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[0,"nanoSelect","handlePanelSelect"]]]);
-const NanoFieldValidator = /*@__PURE__*/proxyCustomElement(FieldValidator, [4,"nano-field-validator",{"validateOn":[1025,"validate-on"],"scrollToInvalid":[4,"scroll-to-invalid"],"dirty":[2564],"valid":[2564],"store":[2064],"payload":[2064],"showValidation":[2052,"show-validation"],"validationState":[2064],"validation":[16],"userForm":[32],"submitted":[32],"_dirty":[32],"_valid":[32],"_store":[32]}]);
+const NanoFieldValidator = /*@__PURE__*/proxyCustomElement(FieldValidator, [4,"nano-field-validator",{"validateOn":[1025,"validate-on"],"scrollToInvalid":[4,"scroll-to-invalid"],"dirty":[2564],"valid":[2564],"store":[2064],"payload":[2064],"showValidation":[2052,"show-validation"],"validationState":[2064],"extraFieldSelector":[1,"extra-field-selector"],"validation":[16],"submitted":[32],"userForm":[32],"_dirty":[32],"_valid":[32],"_store":[32]}]);
 const NanoFileUpload = /*@__PURE__*/proxyCustomElement(FileUpload, [6,"nano-file-upload",{"name":[1],"accept":[1],"capture":[1],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"label":[1],"placeholder":[1],"hideLabel":[4,"hide-label"],"required":[4],"disabled":[516],"clearInput":[4,"clear-input"],"showInlineError":[516,"show-inline-error"],"validateOn":[1025,"validate-on"],"form":[1],"invalid":[2564],"validityMessage":[2049,"validity-message"],"files":[6160],"value":[6145],"hasHelperSlot":[32],"hasLabelSlot":[32],"errorMessage":[32],"isDragging":[32],"fileList":[32],"hasFocus":[32],"_invalid":[32]},[[8,"click","globalClickHandler"],[8,"keydown","globalKeydownHandler"],[16,"reset","onReset"]]]);
 const NanoGlobalNav = /*@__PURE__*/proxyCustomElement(GlobalNav, [1,"nano-global-nav",{"env":[1],"ssoDataUrl":[1,"sso-data-url"],"ssoRedirect":[1,"sso-redirect"],"getMyAccountData":[4,"get-my-account-data"],"activeMyAccountSections":[16],"showSearch":[4,"show-search"],"showLogo":[4,"show-logo"],"logoUrl":[1,"logo-url"],"searchIndeces":[16],"myAccountUser":[1040],"searchAppId":[1025,"search-app-id"],"searchApiKey":[1025,"search-api-key"],"searchValue":[1025,"search-value"],"searchIndex":[1025,"search-index"],"cartCount":[1026,"cart-count"],"msgCount":[1026,"msg-count"],"cartUrl":[1025,"cart-url"],"msgUrl":[1025,"msg-url"],"hasLoggedinSlot":[32],"hasSiteSlot":[32],"hasPromotionSlot":[32],"aboutSlotLen":[32],"iconSlotLen":[32],"mainSlotLen":[32],"overflowSlotLen":[32],"searchSlotLen":[32],"internalSearchIndeces":[32],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"intersectRatio":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"searchLoading":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchValInternal":[32]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"]]]);
 const NanoGlobalSearchResults = /*@__PURE__*/proxyCustomElement(GlobalSearchResults, [1,"nano-global-search-results",{"algoliaEle":[32],"currentWidth":[32],"apiKey":[32],"appId":[32],"index":[32]},[[16,"nanoSearchReset","handleGlobalNavReset"],[16,"nanoSearchResult","handleGlobalNavSearch"],[0,"nanoChange","handleReorder"],[0,"nanoResultsShown","attachListeners"],[16,"nanoNewResults","attachResultListeners"]]]);
@@ -27606,6 +27762,6 @@ const index = /*#__PURE__*/Object.freeze({
   GESTURE_CONTROLLER: GESTURE_CONTROLLER
 });
 
-export { NanoAccordion, NanoAlert, NanoAlgolia, NanoAlgoliaFilter, NanoAlgoliaInput, NanoAlgoliaPagination, NanoAlgoliaResults, NanoAspectRatio, NanoCheckbox, NanoCheckboxGroup, NanoDatalist, NanoDateInput, NanoDatePicker, NanoDetails, NanoDialog, NanoDrawer, NanoDropdown, NanoFieldValidator, NanoFileUpload, NanoGlobalNav, NanoGlobalSearchResults, NanoGrid, NanoGridItem, NanoHero, NanoIcon, NanoIconButton, NanoImg, NanoInput, NanoMenu, NanoMenuDrawer, NanoNavItem, NanoOption, NanoRange, NanoRating, NanoResizeObserve, NanoSelect, NanoSkeleton, NanoSlide, NanoSlides, NanoSpinner, NanoSplitPane, NanoSticker, NanoTab, NanoTabContent, NanoTabGroup, NanoTooltip, defineCustomElements, nanoCreateDialog, debounce$2 as nanoDebounce, raf as nanoRaf, nanoShowAlert, nanoShowToast, throttle as nanoThrottle, setAssetPath, setPlatformOptions };
+export { NanoAccordion, NanoAlert, NanoAlgolia, NanoAlgoliaFilter, NanoAlgoliaInput, NanoAlgoliaPagination, NanoAlgoliaResults, NanoAspectRatio, NanoCheckbox, NanoCheckboxGroup, NanoDatalist, NanoDateInput, NanoDatePicker, NanoDetails, NanoDialog, NanoDrawer, NanoDropdown, NanoFieldValidator, NanoFileUpload, NanoGlobalNav, NanoGlobalSearchResults, NanoGrid, NanoGridItem, NanoHero, NanoIcon, NanoIconButton, NanoImg, NanoInput, NanoMenu, NanoMenuDrawer, NanoNavItem, NanoOption, NanoRange, NanoRating, NanoResizeObserve, NanoSelect, NanoSkeleton, NanoSlide, NanoSlides, NanoSpinner, NanoSplitPane, NanoSticker, NanoTab, NanoTabContent, NanoTabGroup, NanoTooltip, defineCustomElements, nanoCreateDialog, debounce$2 as nanoDebounce, getTabbableElements as nanoGetTabElements, raf as nanoRaf, nanoShowAlert, nanoShowToast, throttle as nanoThrottle, setAssetPath, setPlatformOptions };
 
 //# sourceMappingURL=index.js.map