Merge branch 'next' into file-input

docs/pages/components/file-input.md

@@ -0,0 +1,42 @@
+---
+meta:
+  title: File Input
+  description: A description of the component goes here.
+layout: component
+---
+
+```html:preview
+<form id="upload-form">
+  <sl-file-input label="Upload a file" help-text="Select some files" name="myfiles" multiple></sl-file-input>
+
+  <br />
+
+  <sl-button variant="primary" type="submit">Submit</sl-button>
+</form>
+
+<script>
+  const form = document.getElementById('upload-form');
+
+  form.addEventListener('submit', event => {
+    const formData = new FormData(form);
+
+    event.preventDefault();
+
+    for (const file of formData.values()) {
+      console.log(file);
+    }
+  });
+</script>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+[component-metadata:sl-file-input]

src/components/file-input/file-input.component.ts

@@ -0,0 +1,246 @@
+import '../format-bytes/format-bytes.js';
+import '../icon-button/icon-button.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { defaultValue } from '../../internal/default-value.js';
+import { FormControlController } from '../../internal/form.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property, query, state } from 'lit/decorators.js';
+// import { watch } from '../../internal/watch';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './file-input.styles';
+import type { CSSResultGroup } from 'lit';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
+
+//
+// TODO
+//
+//  - button-only version
+//  - drag and drop support
+//  - localization
+//
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/file-input
+ * @status experimental
+ * @since 2.0
+ *
+ * @dependency sl-format-bytes
+ * @dependency sl-icon-button
+ *
+ * @event sl-input - Emitted when the form control receives input.
+ *
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+
+ * @csspart base - The component's base wrapper.
+ */
+export default class SlFileInput extends ShoelaceElement implements ShoelaceFormControl {
+  static styles: CSSResultGroup = styles;
+
+  private readonly formControlController = new FormControlController(this, {
+    value: (control: SlFileInput) => control.files,
+    assumeInteractionOn: ['sl-input']
+  });
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private readonly localize = new LocalizeController(this);
+
+  @query('input[type="file"]') input: HTMLInputElement;
+
+  @state() private files: File[] = [];
+  @state() private hasFocus = false;
+
+  /** The name of the input, submitted as a name/value pair with form data. */
+  @property() name = '';
+
+  /** The current value of the input, submitted as a name/value pair with form data. */
+  @property() value = '';
+
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  @defaultValue() defaultValue = '';
+
+  /** The input's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws a filled input. */
+  @property({ type: Boolean, reflect: true }) filled = false;
+
+  /** Draws a pill-style input with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  @property() label = '';
+
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  /** Disables the input. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
+  @property() accept = false;
+
+  /** Allows more than one file to be selected. */
+  @property({ type: Boolean }) multiple = false;
+
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+
+  private handleInput() {
+    // Append selected files
+    if (this.input.files) {
+      this.files = this.files.concat([...this.input.files]);
+    }
+
+    // Reset the input
+    this.input.value = '';
+
+    this.emit('sl-input');
+  }
+
+  private handleRemoveClick(_: MouseEvent, indexToRemove: number) {
+    this.files = this.files.filter((__, index) => index !== indexToRemove);
+  }
+
+  private isImage(file: File) {
+    return ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp'].includes(file.type);
+  }
+
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message: string) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--small': this.size === 'small',
+          'form-control--medium': this.size === 'medium',
+          'form-control--large': this.size === 'large',
+          'form-control--has-label': hasLabel,
+          'form-control--has-help-text': hasHelpText
+        })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <div
+            part="base"
+            class=${classMap({
+              input: true,
+
+              // Sizes
+              'input--small': this.size === 'small',
+              'input--medium': this.size === 'medium',
+              'input--large': this.size === 'large',
+
+              // States
+              'input--pill': this.pill,
+              'input--standard': !this.filled,
+              'input--filled': this.filled,
+              'input--disabled': this.disabled,
+              'input--focused': this.hasFocus,
+              'input--empty': !this.value
+            })}
+          >
+            <input
+              id="input"
+              class="input__control"
+              name=${this.name}
+              type="file"
+              aria-describedby="help-text"
+              ?multiple=${this.multiple}
+              @input=${this.handleInput}
+            />
+
+            <sl-button @click=${() => this.input.click()}>Choose Files</sl-button>
+
+            <div class="input__files">
+              ${this.files.map((file, index) => {
+                const isImage = this.isImage(file);
+
+                return html`
+                  <div class="input__file">
+                    <span class="input__file-preview">
+                      ${isImage
+                        ? html`<img
+                            class="input__file-preview-image input__file-preview--image"
+                            src=${URL.createObjectURL(file)}
+                            alt="${file.name}"
+                          />`
+                        : html``}
+                    </span>
+                    <span class="input__file-name">${file.name}</span>
+                    <span class="input__file-size">
+                      <sl-format-bytes
+                        value=${file.size}
+                        display="short"
+                        lang=${this.localize.lang()}
+                      ></sl-format-bytes>
+                    </span>
+                    <sl-icon-button
+                      class="input__file-remove"
+                      name="x-lg"
+                      library="system"
+                      label=${this.localize.term('remove')}
+                      @click=${(event: MouseEvent) => this.handleRemoveClick(event, index)}
+                    ></sl-icon-button>
+                  </div>
+                `;
+              })}
+            </div>
+          </div>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? 'false' : 'true'}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+}

src/components/file-input/file-input.styles.ts

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --preview-size: 4rem;
+
+    display: block;
+  }
+
+  .input__control {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    border: none;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 0;
+  }
+
+  .input__files:not(:empty) {
+    margin-block-start: var(--sl-spacing-medium);
+  }
+
+  .input__file {
+    display: flex;
+    align-items: center;
+  }
+
+  .input__file-preview {
+    position: relative;
+    width: var(--preview-size);
+    height: var(--preview-size);
+    margin-inline-end: var(--sl-spacing-medium);
+  }
+
+  .input__file-preview-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .input__file-name {
+  }
+
+  .input__file-size {
+    font-size: var(--sl-font-size-small);
+    color: var(--sl-color-neutral-800);
+  }
+
+  .input__file-size::before {
+    content: '(';
+  }
+
+  .input__file-size::after {
+    content: ')';
+  }
+`;

src/components/file-input/file-input.test.ts

@@ -0,0 +1,9 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<sl-file-input>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <sl-file-input></sl-file-input> `);
+
+    expect(el).to.exist;
+  });
+});

src/components/file-input/file-input.ts

@@ -0,0 +1,12 @@
+import SlFileInput from './file-input.component.js';
+
+export * from './file-input.component.js';
+export default SlFileInput;
+
+SlFileInput.define('sl-file-input');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-file-input': SlFileInput;
+  }
+}

src/internal/form.ts

@@ -182,7 +182,11 @@ export class FormControlController implements ReactiveController {
     if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
       if (Array.isArray(value)) {
         (value as unknown[]).forEach(val => {
-          event.formData.append(name, (val as string | number | boolean).toString());
+          if (val instanceof File) {
+            event.formData.append(name, val, val.name);
+          } else {
+            event.formData.append(name, (val as string | number | boolean).toString());
+          }
         });
       } else {
         event.formData.append(name, (value as string | number | boolean).toString());

src/shoelace.ts

@@ -19,6 +19,7 @@ export { default as SlDialog } from './components/dialog/dialog.js';
 export { default as SlDivider } from './components/divider/divider.js';
 export { default as SlDrawer } from './components/drawer/drawer.js';
 export { default as SlDropdown } from './components/dropdown/dropdown.js';
+export { default as SlFileInput } from './components/file-input/file-input.js';
 export { default as SlFormatBytes } from './components/format-bytes/format-bytes.js';
 export { default as SlFormatDate } from './components/format-date/format-date.js';
 export { default as SlFormatNumber } from './components/format-number/format-number.js';