calcite-input: pass through native input attributes

[noahmulfinger]

Repurposing this issue to add all of the native input attributes that should be passed through.

Description

The accept attribute restricts the type of files that can be selected when an input has the type file. It would be useful to have this attribute available on calcite-input.

Acceptance Criteria

The accept property is passed down from the calcite-input into the internal input.

Relevant Info

MDN docs for this attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

Which Component

calcite-input

Example Use Case

Profile image upload:

<calcite-label>
  Upload profile image (must be png or jpg)
  <calcite-input type="file" accept="image/png, image/jpeg"></calcite-input>
</calcite-label>

[benelan]

@macandcheese @jcfranco can we triage this to the next sprint?

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified accept and multiple props. ✔️

@benelan Seeking your expertise 🧠 for verifying the autocomplete and pattern props are coming in as-expected with the following Codepen, where:

1. autocomplete:
   Unable to reproduce similar behavior to the native input where information is populated, such as email address.

2. pattern:
   Unable to discern how to use the new prop similar to the native input without using JavaScript to interpret.

[benelan]

My understanding is we have a post v1 epic to improve form validation, and for now users will still need JS like you mentioned. Here's an example:
https://codepen.io/benesri/pen/xxzaNKW?editors=1010

cc @driskull in case I'm wrong about that. I can another stab at it if so.

For autocomplete you have to have it turned on in your browser and have saved info. This works for me:
https://codepen.io/benesri/pen/LYrJozq?editors=1010

[geospatialem]

Awesome, thanks for your expertise! Was missing the name attribute for autocomplete.

Everything looks great in next.649 in the following Codepen.🎇

Marking as verified, since form validation will come later (and as long as JS is expected for pattern at this time). Will re-open if anything changes.

accept:

<calcite-label>Accept png sample
  <calcite-input type="file" accept="image/png"></calcite-input>
</calcite-label>

autocomplete:

<calcite-label layout="inline">Autocomplete email sample
  <calcite-input name="email-input" type="email" autocomplete="email"></calcite-input>
</calcite-label>

multiple:

<calcite-label>Multiple files sample
  <calcite-input type="file" multiple></calcite-input>
</calcite-label>

pattern:

html

<form name="myForm">
  <calcite-label id="username-label" for="username">Username
    <calcite-input type="text" id="username-input" name="username-input" required pattern="[a-z]{4,8}" title="4 to 8 lowercase letters">
    </calcite-input>
    <calcite-input-message hidden icon id="username-message">
        Usernames must be lowercase and 4-8 characters in length.
    </calcite-input-message>
  </calcite-label>
  <calcite-button id="submit-button" name="submit" label="submit">
    Submit
   </calcite-button>
</form>

js

const input = document.getElementById("username-input");
const button = document.getElementById("submit-button");
document.getElementById("submit-button").addEventListener("click", (event) => {
  if (new RegExp(input.pattern).test(input.value)) {
    alert("form submitted");
    document.myForm.submit();
  } else {
    const info = document.getElementById("username-message");
    input.status = "invalid";
    info.status = "invalid";
    info.hidden = false;
  }
});

[yelenakreyndel]

@macandcheese why do we have this issue listed on confluence in the Next section here: https://confluencewikidev.esri.com/display/Calcite/New+Web+Components

[macandcheese]

@yelenakreyndel opened a new issue for tracking, will update Confluence: #6545