@operato/input 10.29.30 → 10.29.37

package/dist/src/ox-input-file.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    InputStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--md-sys-shape-corner-small);\n        align-items: center;\n        justify-content: center;\n        padding: calc(var(--ox-input-gap) * 2);\n        min-height: 100px;\n        text-transform: capitalize;\n\n        border: 1px dashed var(--md-sys-color-outline-variant);\n        background-color: var(--md-sys-color-surface);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n      :host > span {\n        color: var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      :host > md-icon {\n        color: var(--md-sys-color-primary);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop) {\n        background-color: var(--md-sys-color-primary-fixed);\n        border: 1px dashed var(--md-sys-color-primary-fixed-dim);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: var(--md-sys-color-on-primary);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        display: flex;\n        align-items: center;\n      }\n      li md-icon {\n        cursor: pointer;\n        font-size: var(--icon-size-small);\n        margin-left: auto;\n      }\n      li md-icon:hover,\n      li md-icon:active {\n        color: var(--md-sys-color-error);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) icon?: string = 'upload'\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string = 'drop files here!'\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var files: File[] = this.value || []\n\n    return html`\n      <md-icon>${this.icon || 'upload'}</md-icon>\n\n      <span>${this.description || 'drop files here!'}</span>\n\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => this._onChangeValue(e)}\n        ?disabled=${this.disabled}\n      />\n\n      <label for=\"input-file\">${this.label || 'select files'}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <md-icon\n                    @click=${(e: Event) => {\n                      if (this.disabled) {\n                        return\n                      }\n                      files.splice(files.indexOf(file), 1)\n                      this.value = [...files]\n                      this._notifyChange()\n                    }}\n                    >delete_outline</md-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && !(this.value instanceof Array)) {\n      this.value = !this.value ? [] : [this.value]\n    }\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      if (this.disabled) {\n        return\n      }\n\n      const detail = (e as CustomEvent).detail\n      this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this._notifyChange()\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = []\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const files = this.value || []\n\n    this.value = this.attachFileList\n      ? [...files, ...Array.from(fileInput.files as FileList)]\n      : [...Array.from(fileInput.files as FileList)]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-file.js","sourceRoot":"","sources":["../../src/ox-input-file.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { actionHeight, ButtonStyles, ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper, FileRefusal, FileUploadLimits, fileUploadLimits, narrowLimits, sortPickedFiles } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\nconst megabytes = (bytes: number) =>\n  bytes >= 1048576 ? `${Math.round((bytes / 1048576) * 10) / 10}MB` : `${Math.max(1, Math.round(bytes / 1024))}KB`\n\n/**\n * Picks files — the one picker for every screen.\n *\n * Two looks:\n *   (default)  a drop box, for a screen where the file is the subject (an import, an attachment gallery)\n *   quiet      text buttons only — 「첨부」, then the picked name with 「바꾸기」「빼기」 — for a screen that is\n *              read first (a 360 section, a form row). The drop area is `dropTarget` (the section) and\n *              shows only while a file is dragged over it.\n *\n * Both refuse on the spot what the server would refuse after the upload: a type outside `accept`\n * (a drop skips the native filter), a file over the server's size limit, more files than it takes.\n * The limits are the server's own numbers (`fileUploadLimits` in @operato/utils), never written here.\n *\n * The owner uploads; while it does, it sets `progress` (0‒1) and the picker shows it.\n *\n * A panel with its own look styles the quiet buttons through `::part(attach | replace | remove)` and puts its\n * own icon in the attach button through `slot=\"icon\"`. File names are shown as written.\n */\n@customElement('ox-input-file')\nexport class OxInputFile extends OxFormField {\n  static styles = [\n    InputStyles,\n    ScrollbarStyles,\n    ButtonStyles,\n    css`\n      :host(:not([quiet])) {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--md-sys-shape-corner-small);\n        align-items: center;\n        justify-content: center;\n        padding: calc(var(--ox-input-gap) * 2);\n        min-height: 100px;\n\n        border: 1px dashed var(--md-sys-color-outline-variant);\n        background-color: var(--md-sys-color-surface);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n      :host(:not([quiet])) > span {\n        color: var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      :host(:not([quiet])) > md-icon {\n        color: var(--md-sys-color-primary);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n\n      :host(.candrop:not([quiet])) {\n        background-color: var(--md-sys-color-primary-fixed);\n        border: 1px dashed var(--md-sys-color-primary-fixed-dim);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      ul {\n        max-width: 500px;\n        width: 100%;\n        list-style: none;\n        margin: 5px 0 0 0;\n        padding: 0;\n        max-height: 46px;\n        overflow: auto;\n        background-color: var(--md-sys-color-on-primary);\n      }\n      li {\n        text-align: left;\n\n        padding: 3px 5px 2px 5px;\n        border-bottom: var(--file-uploader-li-border-bottom);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        display: flex;\n        align-items: center;\n      }\n      li md-icon {\n        cursor: pointer;\n        font-size: var(--icon-size-small);\n        margin-left: auto;\n      }\n      li md-icon:hover,\n      li md-icon:active {\n        color: var(--md-sys-color-error);\n      }\n\n      /* ── quiet ── no box: the words are the control. */\n      /* --ox-actions-align: a section heading's actions slot says end, and the refusal line follows it. */\n      :host([quiet]) {\n        display: inline-flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: var(--ox-actions-align, start);\n        gap: var(--spacing-small, 4px);\n        /* The name reads at the size of what is around it (a form row, a heading); the buttons keep theirs. */\n        font-size: inherit;\n        color: var(--md-sys-color-on-surface);\n        border-radius: var(--md-sys-shape-corner-small, 4px);\n      }\n\n      :host([quiet].candrop) {\n        outline: 1px dashed var(--md-sys-color-primary);\n        outline-offset: 2px;\n      }\n\n      .picked {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n        min-width: 0;\n      }\n\n      .picked .name {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        max-width: var(--ox-input-file-name-width, 24em);\n      }\n\n      .picked .size,\n      .progress {\n        color: var(--md-sys-color-on-surface-variant);\n        font-variant-numeric: tabular-nums;\n      }\n\n      /* A place that is tapped with a thumb (a phone form) raises it; a heading or a row keeps the cell height. */\n      :host([quiet]) button {\n        height: var(--ox-input-file-action-height, ${actionHeight('--cell-action-height')});\n      }\n\n      .picked md-icon {\n        --md-icon-size: 16px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .picked img {\n        width: 20px;\n        height: 20px;\n        object-fit: cover;\n        border-radius: 2px;\n      }\n\n      .refusal {\n        flex-basis: 100%;\n        text-align: var(--ox-actions-align, start);\n        color: var(--ui-crit, var(--md-sys-color-error));\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  /** The drop box's icon (upload when not given); in the quiet look, shown before the attach word only when given. */\n  @property({ type: String }) icon?: string\n  @property({ type: String }) label?: string\n  @property({ type: String }) description?: string\n  @property({ type: Boolean, reflect: true, attribute: 'hide-filelist' })\n  hideFileList: boolean = false\n  @property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })\n  attachFileList: boolean = false\n\n  /** Text buttons instead of the drop box — for a screen that is read first. */\n  @property({ type: Boolean, reflect: true }) quiet: boolean = false\n\n  /** Where a file may be dropped. The picker itself when not given; a 360 passes its section. */\n  @property({ attribute: false }) dropTarget?: HTMLElement\n\n  /**\n   * The owner's own button (a page action) calls `pick()`: the picker draws no button of its own, only what it\n   * refused and the upload progress, where the owner placed it.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'outside-trigger' }) outsideTrigger: boolean = false\n\n  /**\n   * A screen's own limits, handed down by the server (an AI mode's attachment policy) — never written on the screen.\n   * The picker uses the tighter of these and the server's upload limits.\n   */\n  @property({ attribute: false }) limits?: FileUploadLimits\n\n  /** The file is read in the browser and never uploaded: the server's upload limits do not apply (accept still does). */\n  @property({ type: Boolean, reflect: true }) local: boolean = false\n\n  /** Upload progress 0‒1, set by the owner while it uploads; the buttons wait meanwhile. */\n  @property({ type: Number }) progress?: number\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  @state() private refusals: FileRefusal[] = []\n  @state() private refusalLimits: { maxFileSize?: number; maxFiles?: number } = {}\n\n  private dropArea?: HTMLElement\n  private undoDrop?: () => void\n  private previews = new Map<File, string>()\n\n  private onFileDrop = (e: Event) => {\n    if (this.disabled || this.readonly || this.uploading) {\n      return\n    }\n\n    const files = (e as CustomEvent).detail as File[]\n    this.take(this.multiple ? files : files.slice(0, 1))\n  }\n\n  private get uploading() {\n    return typeof this.progress === 'number'\n  }\n\n  render() {\n    return this.quiet ? this.renderQuiet() : this.renderBox()\n  }\n\n  private renderInput() {\n    return html`<input\n      id=\"input-file\"\n      type=\"file\"\n      accept=${this.accept || ''}\n      ?multiple=${this.multiple}\n      hidden\n      capture=\"environment\"\n      @change=${(e: Event) => this._onChangeValue(e)}\n      ?disabled=${this.disabled || this.readonly}\n    />`\n  }\n\n  private renderBox() {\n    var files: File[] = this.value || []\n\n    return html`\n      <md-icon>${this.icon || 'upload'}</md-icon>\n\n      <span>${this.description || i18next.t('text.drop files here', { defaultValue: 'drop files here!' })}</span>\n\n      ${this.renderInput()}\n\n      <label for=\"input-file\">${this.label || i18next.t('label.select files', { defaultValue: 'select files' })}</label>\n\n      ${!this.hideFileList && files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <md-icon\n                    @click=${(e: Event) => {\n                      if (this.disabled) {\n                        return\n                      }\n                      this.removeFile(file)\n                    }}\n                    >delete_outline</md-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : html``}\n      ${this.renderRefusals()} ${this.renderProgress()}\n    `\n  }\n\n  private renderQuiet() {\n    const files: File[] = this.value || []\n    const busy = this.disabled || this.readonly || this.uploading\n    const shown = this.hideFileList ? [] : files\n\n    if (this.outsideTrigger) {\n      return html`${this.renderInput()} ${this.renderProgress()} ${this.renderRefusals()}`\n    }\n\n    return html`\n      ${this.renderInput()}\n      ${shown.map(\n        file => html`<span class=\"picked\">\n          ${this.renderKind(file)}\n          <span class=\"name\" title=${file.name}>${file.name}</span>\n          <span class=\"size\">${megabytes(file.size)}</span>\n          ${!this.multiple\n            ? html`<button type=\"button\" part=\"replace\" quiet small ?disabled=${busy} @click=${() => this.pick()}>\n                ${i18next.t('label.replace file', { defaultValue: 'replace' })}\n              </button>`\n            : nothing}\n          <button type=\"button\" part=\"remove\" quiet small danger ?disabled=${busy} @click=${() => this.removeFile(file)}>\n            ${i18next.t('label.remove file', { defaultValue: 'remove' })}\n          </button>\n        </span>`\n      )}\n      ${this.multiple || !shown.length\n        ? html`<button type=\"button\" part=\"attach\" quiet small ?disabled=${busy} @click=${() => this.pick()}>\n            <slot name=\"icon\">${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}</slot>${this.label || i18next.t('label.attach file', { defaultValue: 'attach' })}\n          </button>`\n        : nothing}\n      ${this.renderProgress()} ${this.renderRefusals()}\n    `\n  }\n\n  /* A picture shows itself; anything else is told by its kind. */\n  private renderKind(file: File) {\n    const preview = this.previews.get(file)\n    if (preview) return html`<img src=${preview} alt=\"\" />`\n\n    const icon = file.type === 'application/pdf' ? 'picture_as_pdf' : 'draft'\n    return html`<md-icon>${icon}</md-icon>`\n  }\n\n  private renderProgress() {\n    if (!this.uploading) return nothing\n\n    const percent = Math.round(Math.min(1, Math.max(0, this.progress!)) * 100)\n    return html`<span class=\"progress\" role=\"status\">\n      ${i18next.t('text.uploading file', { percent, defaultValue: `uploading ${percent}%` })}\n    </span>`\n  }\n\n  private renderRefusals() {\n    if (!this.refusals.length) return nothing\n\n    const { maxFileSize, maxFiles } = this.refusalLimits\n    return html`<div class=\"refusal\" role=\"alert\">\n      ${this.refusals.map(({ file, reason }) =>\n        reason === 'type'\n          ? i18next.t('text.file refused for type', { name: file.name, defaultValue: `${file.name}: not a type taken here` })\n          : reason === 'size'\n            ? i18next.t('text.file refused for size', {\n                name: file.name,\n                limit: megabytes(maxFileSize!),\n                defaultValue: `${file.name}: over ${megabytes(maxFileSize!)}`\n              })\n            : i18next.t('text.file refused for count', {\n                name: file.name,\n                limit: maxFiles,\n                defaultValue: `${file.name}: ${maxFiles} files at most`\n              })\n      ).join(' · ')}\n    </div>`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && !(this.value instanceof Array)) {\n      this.value = !this.value ? [] : [this.value]\n    }\n\n    if (changes.has('value')) {\n      this.syncPreviews()\n    }\n\n    if (changes.has('dropTarget')) {\n      this.setDropArea()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.hasUpdated) this.setDropArea()\n  }\n\n  firstUpdated() {\n    this.setDropArea()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.undoDrop?.()\n    this.dropArea?.removeEventListener('file-drop', this.onFileDrop)\n    this.undoDrop = this.dropArea = undefined\n\n    this.previews.forEach(url => URL.revokeObjectURL(url))\n    this.previews.clear()\n  }\n\n  private setDropArea() {\n    const area: HTMLElement = this.dropTarget || (this as HTMLElement)\n    if (area === this.dropArea) return\n\n    this.undoDrop?.()\n    this.dropArea?.removeEventListener('file-drop', this.onFileDrop)\n\n    this.dropArea = area\n    this.undoDrop = FileDropHelper.set(area)\n    area.addEventListener('file-drop', this.onFileDrop)\n  }\n\n  private syncPreviews() {\n    const files: File[] = this.value || []\n\n    this.previews.forEach((url, file) => {\n      if (!files.includes(file)) {\n        URL.revokeObjectURL(url)\n        this.previews.delete(file)\n      }\n    })\n\n    if (!this.quiet) return\n\n    files.forEach(file => {\n      if (!this.previews.has(file) && file.type?.startsWith('image/')) {\n        this.previews.set(file, URL.createObjectURL(file))\n      }\n    })\n  }\n\n  get files() {\n    return this.value\n  }\n\n  /** Opens the file dialog — for an owner whose own button starts the pick. */\n  pick() {\n    if (this.disabled || this.readonly || this.uploading) return\n    this.fileInput?.click()\n  }\n\n  reset() {\n    if (this.fileInput) this.fileInput.value = ''\n    this.value = []\n    this.refusals = []\n\n    this._notifyChange()\n  }\n\n  private removeFile(file: File) {\n    const files: File[] = this.value || []\n\n    this.value = files.filter(one => one !== file)\n    this.refusals = []\n    this._notifyChange()\n  }\n\n  private async take(picked: File[]) {\n    const files: File[] = this.value || []\n    const keep = this.attachFileList\n    const limits = this.local ? narrowLimits(this.limits) : narrowLimits(this.limits, await fileUploadLimits())\n\n    const { taken, refused } = sortPickedFiles(picked, {\n      accept: this.accept,\n      limits,\n      already: keep ? files.length : 0\n    })\n\n    this.refusals = refused\n    this.refusalLimits = limits\n\n    if (!taken.length) return\n\n    this.value = keep ? [...files, ...taken] : taken\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n    const picked = Array.from(fileInput.files as FileList)\n\n    /* The same file picked again must still raise change. */\n    fileInput.value = ''\n\n    this.take(picked)\n  }\n\n  _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/test/ox-input-file.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-input-file.js';

package/dist/test/ox-input-file.test.js

@@ -0,0 +1,202 @@
+import { aTimeout, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { registerFileUploadLimits } from '@operato/utils';
+import '../src/ox-input-file.js';
+/**
+ * The one file picker.
+ *
+ * ## Why this is tested
+ *
+ * Every screen that takes a file goes through this element, and a 360 uses its quiet look. What
+ * must hold:
+ *
+ * ```
+ * quiet         no box: an attach button; once picked, the name with replace and remove
+ * refusal       a type outside accept or a file over the server's limit never becomes the value,
+ *               and says so in place — a drop skips the native accept filter
+ * drop target   a drop lands on the element the owner gives (a 360 section), and only there
+ * progress      while the owner uploads, the buttons wait and the percent shows
+ * ```
+ */
+describe('ox-input-file', () => {
+    const file = (name, type, size = 10) => new File([new Uint8Array(size)], name, { type });
+    const drop = (area, ...files) => {
+        const dataTransfer = new DataTransfer();
+        files.forEach(one => dataTransfer.items.add(one));
+        area.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }));
+    };
+    const settle = async (el) => {
+        await aTimeout(0);
+        await el.updateComplete;
+    };
+    const buttons = (el) => [...el.renderRoot.querySelectorAll('button')];
+    /* The theme token the box border is drawn with; without it the border falls away and every look reads 'none'. */
+    before(() => document.documentElement.style.setProperty('--md-sys-color-outline-variant', 'gray'));
+    after(() => document.documentElement.style.removeProperty('--md-sys-color-outline-variant'));
+    afterEach(() => registerFileUploadLimits(async () => ({})));
+    it('draws no box when quiet, and shows the picked name with replace and remove', async () => {
+        const el = await fixture(html `<ox-input-file quiet accept="image/*,application/pdf"></ox-input-file>`);
+        expect(getComputedStyle(el).borderTopStyle, 'quiet still draws a box').to.equal('none');
+        expect(buttons(el).length, 'one attach button before a pick').to.equal(1);
+        let changes = 0;
+        el.addEventListener('change', () => changes++);
+        drop(el, file('paper.pdf', 'application/pdf'));
+        await settle(el);
+        expect(el.value.map((one) => one.name)).to.deep.equal(['paper.pdf']);
+        expect(el.renderRoot.querySelector('.picked .name').textContent).to.equal('paper.pdf');
+        expect(buttons(el).length, 'replace and remove').to.equal(2);
+        const remove = buttons(el).find(one => one.hasAttribute('danger'));
+        remove.click();
+        await el.updateComplete;
+        expect(el.value).to.deep.equal([]);
+        expect(changes).to.equal(2);
+    });
+    it('refuses a type outside accept and a file over the server limit, in place', async () => {
+        registerFileUploadLimits(async () => ({ maxFileSize: 20 }));
+        const el = await fixture(html `<ox-input-file quiet multiple accept="image/*"></ox-input-file>`);
+        drop(el, file('note.txt', 'text/plain'), file('big.png', 'image/png', 50), file('ok.png', 'image/png', 5));
+        await settle(el);
+        expect(el.value.map((one) => one.name)).to.deep.equal(['ok.png']);
+        const refusal = el.renderRoot.querySelector('[role="alert"]');
+        expect(refusal, 'no refusal shown').to.exist;
+        expect(refusal.textContent).to.contain('note.txt');
+        expect(refusal.textContent).to.contain('big.png');
+    });
+    it('takes a drop on the given target and lets go of the old one', async () => {
+        const section = document.createElement('section');
+        const other = document.createElement('section');
+        document.body.append(section, other);
+        const el = await fixture(html `<ox-input-file quiet .dropTarget=${section}></ox-input-file>`);
+        drop(section, file('a.pdf', 'application/pdf'));
+        await settle(el);
+        expect(el.value.map((one) => one.name)).to.deep.equal(['a.pdf']);
+        el.dropTarget = other;
+        await el.updateComplete;
+        drop(section, file('b.pdf', 'application/pdf'));
+        await settle(el);
+        expect(el.value.map((one) => one.name), 'the old target still takes drops').to.deep.equal(['a.pdf']);
+        section.dispatchEvent(new DragEvent('dragenter', { bubbles: true }));
+        expect(section.classList.contains('candrop'), 'the old target still lights up').to.equal(false);
+        drop(other, file('c.pdf', 'application/pdf'));
+        await settle(el);
+        expect(el.value.map((one) => one.name)).to.deep.equal(['c.pdf']);
+        section.remove();
+        other.remove();
+    });
+    it('waits while the owner uploads and shows the percent', async () => {
+        const el = await fixture(html `<ox-input-file quiet .progress=${0.4}></ox-input-file>`);
+        expect(buttons(el).every(one => one.disabled), 'a button works mid-upload').to.equal(true);
+        expect(el.renderRoot.querySelector('[role="status"]').textContent).to.contain('40');
+        drop(el, file('a.pdf', 'application/pdf'));
+        await settle(el);
+        expect(el.value ?? [], 'a drop landed mid-upload').to.deep.equal([]);
+    });
+    it('keeps its button at the end where its place says so, with the refusal under it', async () => {
+        const wrap = await fixture(html `<div style="--ox-actions-align: end; display: flex; justify-content: flex-end; width: 400px">
+      <ox-input-file quiet accept="image/*"></ox-input-file>
+    </div>`);
+        const el = wrap.querySelector('ox-input-file');
+        drop(el, file('a-rather-long-file-name-that-was-refused.txt', 'text/plain'));
+        await settle(el);
+        const host = el.getBoundingClientRect();
+        const button = buttons(el)[0].getBoundingClientRect();
+        const refusal = el.renderRoot.querySelector('[role="alert"]');
+        expect(Math.abs(host.right - button.right), 'the button left the end').to.be.below(1);
+        expect(getComputedStyle(refusal).textAlign).to.equal('end');
+    });
+    it('writes the picked name at the size of its surroundings', async () => {
+        const wrap = await fixture(html `<div style="font-size: 11px"><ox-input-file quiet></ox-input-file></div>`);
+        const el = wrap.querySelector('ox-input-file');
+        drop(el, file('a.pdf', 'application/pdf'));
+        await settle(el);
+        expect(getComputedStyle(el.renderRoot.querySelector('.picked .name')).fontSize).to.equal('11px');
+    });
+    it('starts at the start when nothing says otherwise', async () => {
+        const el = await fixture(html `<ox-input-file quiet accept="image/*"></ox-input-file>`);
+        drop(el, file('a-rather-long-file-name-that-was-refused.txt', 'text/plain'));
+        await settle(el);
+        expect(Math.abs(el.getBoundingClientRect().left - buttons(el)[0].getBoundingClientRect().left)).to.be.below(1);
+    });
+    it('shows an icon only when given one, and takes its button height from its place', async () => {
+        const plain = await fixture(html `<ox-input-file quiet></ox-input-file>`);
+        expect(!!buttons(plain)[0].querySelector('md-icon'), 'an icon nobody asked for').to.equal(false);
+        const wrap = await fixture(html `<div style="--ox-input-file-action-height: 40px">
+      <ox-input-file quiet icon="photo_camera" label="take"></ox-input-file>
+    </div>`);
+        const camera = wrap.querySelector('ox-input-file');
+        const button = buttons(camera)[0];
+        expect(button.querySelector('md-icon')?.textContent).to.equal('photo_camera');
+        expect(button.getBoundingClientRect().height).to.equal(40);
+    });
+    it('draws no button of its own when a page action starts the pick, and still refuses in place', async () => {
+        const el = await fixture(html `<ox-input-file quiet outside-trigger accept="application/pdf"></ox-input-file>`);
+        expect(buttons(el).length, 'a second trigger beside the page action').to.equal(0);
+        let opened = 0;
+        el.fileInput.click = () => opened++;
+        el.pick();
+        expect(opened, 'pick() did not open the dialog').to.equal(1);
+        drop(el, file('register.xlsx', 'application/vnd.ms-excel'));
+        await settle(el);
+        expect(!!el.renderRoot.querySelector('[role="alert"]'), 'the refusal is not shown').to.equal(true);
+    });
+    it('leaves the server limits out for a file read in the browser, and still checks the type', async () => {
+        registerFileUploadLimits(async () => ({ maxFileSize: 20 }));
+        const el = await fixture(html `<ox-input-file quiet local accept=".json"></ox-input-file>`);
+        drop(el, file('samples.json', 'application/json', 50));
+        await settle(el);
+        expect(el.value.map((one) => one.name), 'a local file was held to the upload limit').to.deep.equal(['samples.json']);
+        drop(el, file('notes.txt', 'text/plain'));
+        await settle(el);
+        expect(el.value.map((one) => one.name)).to.deep.equal(['samples.json']);
+        expect(!!el.renderRoot.querySelector('[role="alert"]')).to.equal(true);
+    });
+    it('takes a screen limit tighter than the server, and never a looser one', async () => {
+        registerFileUploadLimits(async () => ({ maxFileSize: 100 }));
+        const el = await fixture(html `<ox-input-file quiet multiple .limits=${{ maxFileSize: 20 }}></ox-input-file>`);
+        drop(el, file('small.png', 'image/png', 10), file('middle.png', 'image/png', 50));
+        await settle(el);
+        expect(el.value.map((one) => one.name), 'the screen limit was not applied').to.deep.equal(['small.png']);
+        el.limits = { maxFileSize: 1000 };
+        drop(el, file('large.png', 'image/png', 500));
+        await settle(el);
+        expect(el.value.map((one) => one.name), 'a screen loosened the server limit').to.deep.equal(['small.png']);
+    });
+    it('shows a file name as written, in the box and in a refusal', async () => {
+        const el = await fixture(html `<ox-input-file accept="image/*"></ox-input-file>`);
+        drop(el, file('notes.txt', 'text/plain'));
+        await settle(el);
+        expect(getComputedStyle(el.renderRoot.querySelector('[role="alert"]')).textTransform, 'the refusal recased the name').to.equal('none');
+        el.accept = '';
+        drop(el, file('model.figpkg', ''));
+        await settle(el);
+        expect(getComputedStyle(el.renderRoot.querySelector('li')).textTransform, 'the list recased the name').to.equal('none');
+    });
+    it('lets a panel style its quiet buttons by part and give the attach button its own icon', async () => {
+        const el = await fixture(html `<ox-input-file quiet><span slot="icon" id="tile">▣</span></ox-input-file>`);
+        const attach = el.renderRoot.querySelector('[part="attach"]');
+        expect(!!attach, 'no attach part').to.equal(true);
+        const slot = attach.querySelector('slot[name="icon"]');
+        expect(slot.assignedElements().map(one => one.id)).to.deep.equal(['tile']);
+        drop(el, file('a.pdf', 'application/pdf'));
+        await settle(el);
+        expect([...el.renderRoot.querySelectorAll('[part]')].map((one) => one.getAttribute('part'))).to.deep.equal(['replace', 'remove']);
+    });
+    it('hands its files to the form data as files', async () => {
+        const form = await fixture(html `<form><ox-input-file name="papers" multiple></ox-input-file></form>`);
+        const el = form.querySelector('ox-input-file');
+        drop(el, file('a.pdf', 'application/pdf'), file('b.png', 'image/png'));
+        await settle(el);
+        const sent = new FormData(form).getAll('papers');
+        expect(sent.every(one => one instanceof File), 'a file went as text').to.equal(true);
+        expect(sent.map(one => one.name)).to.deep.equal(['a.pdf', 'b.png']);
+    });
+    it('keeps the drop box when not quiet', async () => {
+        const el = await fixture(html `<ox-input-file></ox-input-file>`);
+        expect(getComputedStyle(el).borderTopStyle).to.equal('dashed');
+        expect(el.renderRoot.querySelector('label[for="input-file"]')).to.exist;
+        drop(el, file('a.bin', ''));
+        await settle(el);
+        expect(el.renderRoot.querySelectorAll('li').length).to.equal(1);
+    });
+});
+//# sourceMappingURL=ox-input-file.test.js.map

package/dist/test/ox-input-file.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-file.test.js","sourceRoot":"","sources":["../../test/ox-input-file.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { aTimeout, expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport { registerFileUploadLimits } from '@operato/utils'\n\nimport '../src/ox-input-file.js'\n\n/**\n * The one file picker.\n *\n * ## Why this is tested\n *\n * Every screen that takes a file goes through this element, and a 360 uses its quiet look. What\n * must hold:\n *\n * ```\n * quiet         no box: an attach button; once picked, the name with replace and remove\n * refusal       a type outside accept or a file over the server's limit never becomes the value,\n *               and says so in place — a drop skips the native accept filter\n * drop target   a drop lands on the element the owner gives (a 360 section), and only there\n * progress      while the owner uploads, the buttons wait and the percent shows\n * ```\n */\ndescribe('ox-input-file', () => {\n  const file = (name: string, type: string, size = 10) => new File([new Uint8Array(size)], name, { type })\n\n  const drop = (area: HTMLElement, ...files: File[]) => {\n    const dataTransfer = new DataTransfer()\n    files.forEach(one => dataTransfer.items.add(one))\n    area.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }))\n  }\n\n  const settle = async (el: any) => {\n    await aTimeout(0)\n    await el.updateComplete\n  }\n\n  const buttons = (el: any) => [...el.renderRoot.querySelectorAll('button')] as HTMLButtonElement[]\n\n  /* The theme token the box border is drawn with; without it the border falls away and every look reads 'none'. */\n  before(() => document.documentElement.style.setProperty('--md-sys-color-outline-variant', 'gray'))\n  after(() => document.documentElement.style.removeProperty('--md-sys-color-outline-variant'))\n\n  afterEach(() => registerFileUploadLimits(async () => ({})))\n\n  it('draws no box when quiet, and shows the picked name with replace and remove', async () => {\n    const el: any = await fixture(html`<ox-input-file quiet accept=\"image/*,application/pdf\"></ox-input-file>`)\n\n    expect(getComputedStyle(el).borderTopStyle, 'quiet still draws a box').to.equal('none')\n    expect(buttons(el).length, 'one attach button before a pick').to.equal(1)\n\n    let changes = 0\n    el.addEventListener('change', () => changes++)\n\n    drop(el, file('paper.pdf', 'application/pdf'))\n    await settle(el)\n\n    expect(el.value.map((one: File) => one.name)).to.deep.equal(['paper.pdf'])\n    expect(el.renderRoot.querySelector('.picked .name').textContent).to.equal('paper.pdf')\n    expect(buttons(el).length, 'replace and remove').to.equal(2)\n\n    const remove = buttons(el).find(one => one.hasAttribute('danger'))!\n    remove.click()\n    await el.updateComplete\n\n    expect(el.value).to.deep.equal([])\n    expect(changes).to.equal(2)\n  })\n\n  it('refuses a type outside accept and a file over the server limit, in place', async () => {\n    registerFileUploadLimits(async () => ({ maxFileSize: 20 }))\n\n    const el: any = await fixture(html`<ox-input-file quiet multiple accept=\"image/*\"></ox-input-file>`)\n\n    drop(el, file('note.txt', 'text/plain'), file('big.png', 'image/png', 50), file('ok.png', 'image/png', 5))\n    await settle(el)\n\n    expect(el.value.map((one: File) => one.name)).to.deep.equal(['ok.png'])\n\n    const refusal = el.renderRoot.querySelector('[role=\"alert\"]')\n    expect(refusal, 'no refusal shown').to.exist\n    expect(refusal.textContent).to.contain('note.txt')\n    expect(refusal.textContent).to.contain('big.png')\n  })\n\n  it('takes a drop on the given target and lets go of the old one', async () => {\n    const section = document.createElement('section')\n    const other = document.createElement('section')\n    document.body.append(section, other)\n\n    const el: any = await fixture(html`<ox-input-file quiet .dropTarget=${section}></ox-input-file>`)\n\n    drop(section, file('a.pdf', 'application/pdf'))\n    await settle(el)\n    expect(el.value.map((one: File) => one.name)).to.deep.equal(['a.pdf'])\n\n    el.dropTarget = other\n    await el.updateComplete\n\n    drop(section, file('b.pdf', 'application/pdf'))\n    await settle(el)\n    expect(el.value.map((one: File) => one.name), 'the old target still takes drops').to.deep.equal(['a.pdf'])\n\n    section.dispatchEvent(new DragEvent('dragenter', { bubbles: true }))\n    expect(section.classList.contains('candrop'), 'the old target still lights up').to.equal(false)\n\n    drop(other, file('c.pdf', 'application/pdf'))\n    await settle(el)\n    expect(el.value.map((one: File) => one.name)).to.deep.equal(['c.pdf'])\n\n    section.remove()\n    other.remove()\n  })\n\n  it('waits while the owner uploads and shows the percent', async () => {\n    const el: any = await fixture(html`<ox-input-file quiet .progress=${0.4}></ox-input-file>`)\n\n    expect(buttons(el).every(one => one.disabled), 'a button works mid-upload').to.equal(true)\n    expect(el.renderRoot.querySelector('[role=\"status\"]').textContent).to.contain('40')\n\n    drop(el, file('a.pdf', 'application/pdf'))\n    await settle(el)\n    expect(el.value ?? [], 'a drop landed mid-upload').to.deep.equal([])\n  })\n\n  it('keeps its button at the end where its place says so, with the refusal under it', async () => {\n    const wrap: any = await fixture(html`<div style=\"--ox-actions-align: end; display: flex; justify-content: flex-end; width: 400px\">\n      <ox-input-file quiet accept=\"image/*\"></ox-input-file>\n    </div>`)\n    const el: any = wrap.querySelector('ox-input-file')\n\n    drop(el, file('a-rather-long-file-name-that-was-refused.txt', 'text/plain'))\n    await settle(el)\n\n    const host = el.getBoundingClientRect()\n    const button = buttons(el)[0].getBoundingClientRect()\n    const refusal = el.renderRoot.querySelector('[role=\"alert\"]')\n\n    expect(Math.abs(host.right - button.right), 'the button left the end').to.be.below(1)\n    expect(getComputedStyle(refusal).textAlign).to.equal('end')\n  })\n\n  it('writes the picked name at the size of its surroundings', async () => {\n    const wrap: any = await fixture(html`<div style=\"font-size: 11px\"><ox-input-file quiet></ox-input-file></div>`)\n    const el: any = wrap.querySelector('ox-input-file')\n\n    drop(el, file('a.pdf', 'application/pdf'))\n    await settle(el)\n\n    expect(getComputedStyle(el.renderRoot.querySelector('.picked .name')).fontSize).to.equal('11px')\n  })\n\n  it('starts at the start when nothing says otherwise', async () => {\n    const el: any = await fixture(html`<ox-input-file quiet accept=\"image/*\"></ox-input-file>`)\n\n    drop(el, file('a-rather-long-file-name-that-was-refused.txt', 'text/plain'))\n    await settle(el)\n\n    expect(Math.abs(el.getBoundingClientRect().left - buttons(el)[0].getBoundingClientRect().left)).to.be.below(1)\n  })\n\n  it('shows an icon only when given one, and takes its button height from its place', async () => {\n    const plain: any = await fixture(html`<ox-input-file quiet></ox-input-file>`)\n    expect(!!buttons(plain)[0].querySelector('md-icon'), 'an icon nobody asked for').to.equal(false)\n\n    const wrap: any = await fixture(html`<div style=\"--ox-input-file-action-height: 40px\">\n      <ox-input-file quiet icon=\"photo_camera\" label=\"take\"></ox-input-file>\n    </div>`)\n    const camera: any = wrap.querySelector('ox-input-file')\n    const button = buttons(camera)[0]\n\n    expect(button.querySelector('md-icon')?.textContent).to.equal('photo_camera')\n    expect(button.getBoundingClientRect().height).to.equal(40)\n  })\n\n  it('draws no button of its own when a page action starts the pick, and still refuses in place', async () => {\n    const el: any = await fixture(html`<ox-input-file quiet outside-trigger accept=\"application/pdf\"></ox-input-file>`)\n\n    expect(buttons(el).length, 'a second trigger beside the page action').to.equal(0)\n\n    let opened = 0\n    el.fileInput.click = () => opened++\n    el.pick()\n    expect(opened, 'pick() did not open the dialog').to.equal(1)\n\n    drop(el, file('register.xlsx', 'application/vnd.ms-excel'))\n    await settle(el)\n    expect(!!el.renderRoot.querySelector('[role=\"alert\"]'), 'the refusal is not shown').to.equal(true)\n  })\n\n  it('leaves the server limits out for a file read in the browser, and still checks the type', async () => {\n    registerFileUploadLimits(async () => ({ maxFileSize: 20 }))\n    const el: any = await fixture(html`<ox-input-file quiet local accept=\".json\"></ox-input-file>`)\n\n    drop(el, file('samples.json', 'application/json', 50))\n    await settle(el)\n    expect(el.value.map((one: File) => one.name), 'a local file was held to the upload limit').to.deep.equal(['samples.json'])\n\n    drop(el, file('notes.txt', 'text/plain'))\n    await settle(el)\n    expect(el.value.map((one: File) => one.name)).to.deep.equal(['samples.json'])\n    expect(!!el.renderRoot.querySelector('[role=\"alert\"]')).to.equal(true)\n  })\n\n  it('takes a screen limit tighter than the server, and never a looser one', async () => {\n    registerFileUploadLimits(async () => ({ maxFileSize: 100 }))\n    const el: any = await fixture(html`<ox-input-file quiet multiple .limits=${{ maxFileSize: 20 }}></ox-input-file>`)\n\n    drop(el, file('small.png', 'image/png', 10), file('middle.png', 'image/png', 50))\n    await settle(el)\n    expect(el.value.map((one: File) => one.name), 'the screen limit was not applied').to.deep.equal(['small.png'])\n\n    el.limits = { maxFileSize: 1000 }\n    drop(el, file('large.png', 'image/png', 500))\n    await settle(el)\n    expect(el.value.map((one: File) => one.name), 'a screen loosened the server limit').to.deep.equal(['small.png'])\n  })\n\n  it('shows a file name as written, in the box and in a refusal', async () => {\n    const el: any = await fixture(html`<ox-input-file accept=\"image/*\"></ox-input-file>`)\n\n    drop(el, file('notes.txt', 'text/plain'))\n    await settle(el)\n    expect(getComputedStyle(el.renderRoot.querySelector('[role=\"alert\"]')).textTransform, 'the refusal recased the name').to.equal('none')\n\n    el.accept = ''\n    drop(el, file('model.figpkg', ''))\n    await settle(el)\n    expect(getComputedStyle(el.renderRoot.querySelector('li')).textTransform, 'the list recased the name').to.equal('none')\n  })\n\n  it('lets a panel style its quiet buttons by part and give the attach button its own icon', async () => {\n    const el: any = await fixture(html`<ox-input-file quiet><span slot=\"icon\" id=\"tile\">▣</span></ox-input-file>`)\n\n    const attach = el.renderRoot.querySelector('[part=\"attach\"]')\n    expect(!!attach, 'no attach part').to.equal(true)\n    const slot = attach.querySelector('slot[name=\"icon\"]') as HTMLSlotElement\n    expect(slot.assignedElements().map(one => one.id)).to.deep.equal(['tile'])\n\n    drop(el, file('a.pdf', 'application/pdf'))\n    await settle(el)\n    expect([...el.renderRoot.querySelectorAll('[part]')].map((one: Element) => one.getAttribute('part'))).to.deep.equal(['replace', 'remove'])\n  })\n\n  it('hands its files to the form data as files', async () => {\n    const form: any = await fixture(html`<form><ox-input-file name=\"papers\" multiple></ox-input-file></form>`)\n    const el: any = form.querySelector('ox-input-file')\n\n    drop(el, file('a.pdf', 'application/pdf'), file('b.png', 'image/png'))\n    await settle(el)\n\n    const sent = new FormData(form).getAll('papers') as File[]\n    expect(sent.every(one => one instanceof File), 'a file went as text').to.equal(true)\n    expect(sent.map(one => one.name)).to.deep.equal(['a.pdf', 'b.png'])\n  })\n\n  it('keeps the drop box when not quiet', async () => {\n    const el: any = await fixture(html`<ox-input-file></ox-input-file>`)\n\n    expect(getComputedStyle(el).borderTopStyle).to.equal('dashed')\n    expect(el.renderRoot.querySelector('label[for=\"input-file\"]')).to.exist\n\n    drop(el, file('a.bin', ''))\n    await settle(el)\n    expect(el.renderRoot.querySelectorAll('li').length).to.equal(1)\n  })\n})\n"]}