@operato/input 10.29.29 → 10.29.36

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

@@ -4,6 +4,21 @@
 import '@material/web/icon/icon.js';
 import { PropertyValues } from 'lit';
 import { OxFormField } from './ox-form-field.js';
+/**
+ * Picks files — the one picker for every screen.
+ *
+ * Two looks:
+ *   (default)  a drop box, for a screen where the file is the subject (an import, an attachment gallery)
+ *   quiet      text buttons only — 「첨부」, then the picked name with 「바꾸기」「빼기」 — for a screen that is
+ *              read first (a 360 section, a form row). The drop area is `dropTarget` (the section) and
+ *              shows only while a file is dragged over it.
+ *
+ * Both refuse on the spot what the server would refuse after the upload: a type outside `accept`
+ * (a drop skips the native filter), a file over the server's size limit, more files than it takes.
+ * The limits are the server's own numbers (`fileUploadLimits` in @operato/utils), never written here.
+ *
+ * The owner uploads; while it does, it sets `progress` (0‒1) and the picker shows it.
+ */
 export declare class OxInputFile extends OxFormField {
     static styles: import("lit").CSSResult[];
     multiple?: boolean;
@@ -13,12 +28,39 @@ export declare class OxInputFile extends OxFormField {
     description?: string;
     hideFileList: boolean;
     attachFileList: boolean;
+    /** Text buttons instead of the drop box — for a screen that is read first. */
+    quiet: boolean;
+    /** Where a file may be dropped. The picker itself when not given; a 360 passes its section. */
+    dropTarget?: HTMLElement;
+    /** Upload progress 0‒1, set by the owner while it uploads; the buttons wait meanwhile. */
+    progress?: number;
     fileInput: HTMLInputElement;
+    private refusals;
+    private refusalLimits;
+    private dropArea?;
+    private undoDrop?;
+    private previews;
+    private onFileDrop;
+    private get uploading();
     render(): import("lit-html").TemplateResult<1>;
+    private renderInput;
+    private renderBox;
+    private renderQuiet;
+    private renderKind;
+    private renderProgress;
+    private renderRefusals;
     updated(changes: PropertyValues<this>): void;
+    connectedCallback(): void;
     firstUpdated(): void;
+    disconnectedCallback(): void;
+    private setDropArea;
+    private syncPreviews;
     get files(): any;
+    /** Opens the file dialog — for an owner whose own button starts the pick. */
+    pick(): void;
     reset(): void;
+    private removeFile;
+    private take;
     _onChangeValue(e: Event): void;
     _notifyChange(): void;
 }

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

@@ -3,25 +3,54 @@
  */
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
-import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
-import { FileDropHelper } from '@operato/utils';
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { ButtonStyles, ScrollbarStyles } from '@operato/styles';
+import { FileDropHelper, fileUploadLimits, sortPickedFiles } from '@operato/utils';
 import { OxFormField } from './ox-form-field.js';
 import { InputStyles } from './input-styles.js';
+const megabytes = (bytes) => bytes >= 1048576 ? `${Math.round((bytes / 1048576) * 10) / 10}MB` : `${Math.max(1, Math.round(bytes / 1024))}KB`;
+/**
+ * Picks files — the one picker for every screen.
+ *
+ * Two looks:
+ *   (default)  a drop box, for a screen where the file is the subject (an import, an attachment gallery)
+ *   quiet      text buttons only — 「첨부」, then the picked name with 「바꾸기」「빼기」 — for a screen that is
+ *              read first (a 360 section, a form row). The drop area is `dropTarget` (the section) and
+ *              shows only while a file is dragged over it.
+ *
+ * Both refuse on the spot what the server would refuse after the upload: a type outside `accept`
+ * (a drop skips the native filter), a file over the server's size limit, more files than it takes.
+ * The limits are the server's own numbers (`fileUploadLimits` in @operato/utils), never written here.
+ *
+ * The owner uploads; while it does, it sets `progress` (0‒1) and the picker shows it.
+ */
 let OxInputFile = class OxInputFile extends OxFormField {
     constructor() {
         super(...arguments);
         this.icon = 'upload';
-        this.description = 'drop files here!';
         this.hideFileList = false;
         this.attachFileList = false;
+        /** Text buttons instead of the drop box — for a screen that is read first. */
+        this.quiet = false;
+        this.refusals = [];
+        this.refusalLimits = {};
+        this.previews = new Map();
+        this.onFileDrop = (e) => {
+            if (this.disabled || this.readonly || this.uploading) {
+                return;
+            }
+            const files = e.detail;
+            this.take(this.multiple ? files : files.slice(0, 1));
+        };
     }
     static { this.styles = [
         InputStyles,
         ScrollbarStyles,
+        ButtonStyles,
         css `
-      :host {
+      :host(:not([quiet])) {
         display: flex;
         flex-direction: column;
         border-radius: var(--md-sys-shape-corner-small);
@@ -35,17 +64,17 @@ let OxInputFile = class OxInputFile extends OxFormField {
         background-color: var(--md-sys-color-surface);
         font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
       }
-      :host > span {
+      :host(:not([quiet])) > span {
         color: var(--md-sys-color-primary);
         font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));
       }
 
-      :host > md-icon {
+      :host(:not([quiet])) > md-icon {
         color: var(--md-sys-color-primary);
         --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
 
-      :host(.candrop) {
+      :host(.candrop:not([quiet])) {
         background-color: var(--md-sys-color-primary-fixed);
         border: 1px dashed var(--md-sys-color-primary-fixed-dim);
       }
@@ -95,27 +124,89 @@ let OxInputFile = class OxInputFile extends OxFormField {
       li md-icon:active {
         color: var(--md-sys-color-error);
       }
+
+      /* ── quiet ── no box: the words are the control. */
+      :host([quiet]) {
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        font-size: var(--ui-t-body, 13px);
+        color: var(--md-sys-color-on-surface);
+        border-radius: var(--md-sys-shape-corner-small, 4px);
+      }
+
+      :host([quiet].candrop) {
+        outline: 1px dashed var(--md-sys-color-primary);
+        outline-offset: 2px;
+      }
+
+      .picked {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        min-width: 0;
+      }
+
+      .picked .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: var(--ox-input-file-name-width, 24em);
+      }
+
+      .picked .size,
+      .progress {
+        color: var(--md-sys-color-on-surface-variant);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .picked md-icon {
+        --md-icon-size: 16px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .picked img {
+        width: 20px;
+        height: 20px;
+        object-fit: cover;
+        border-radius: 2px;
+      }
+
+      .refusal {
+        flex-basis: 100%;
+        color: var(--ui-crit, var(--md-sys-color-error));
+      }
     `
     ]; }
+    get uploading() {
+        return typeof this.progress === 'number';
+    }
     render() {
+        return this.quiet ? this.renderQuiet() : this.renderBox();
+    }
+    renderInput() {
+        return html `<input
+      id="input-file"
+      type="file"
+      accept=${this.accept || ''}
+      ?multiple=${this.multiple}
+      hidden
+      capture="environment"
+      @change=${(e) => this._onChangeValue(e)}
+      ?disabled=${this.disabled || this.readonly}
+    />`;
+    }
+    renderBox() {
         var files = this.value || [];
         return html `
       <md-icon>${this.icon || 'upload'}</md-icon>
 
-      <span>${this.description || 'drop files here!'}</span>
+      <span>${this.description || i18next.t('text.drop files here', { defaultValue: 'drop files here!' })}</span>
 
-      <input
-        id="input-file"
-        type="file"
-        accept=${this.accept}
-        ?multiple=${this.multiple}
-        hidden
-        capture="environment"
-        @change=${(e) => this._onChangeValue(e)}
-        ?disabled=${this.disabled}
-      />
+      ${this.renderInput()}
 
-      <label for="input-file">${this.label || 'select files'}</label>
+      <label for="input-file">${this.label || i18next.t('label.select files', { defaultValue: 'select files' })}</label>
 
       ${!this.hideFileList && files?.length
             ? html ` <ul>
@@ -127,9 +218,7 @@ let OxInputFile = class OxInputFile extends OxFormField {
                 if (this.disabled) {
                     return;
                 }
-                files.splice(files.indexOf(file), 1);
-                this.value = [...files];
-                this._notifyChange();
+                this.removeFile(file);
             }}
                     >delete_outline</md-icon
                   >
@@ -137,41 +226,170 @@ let OxInputFile = class OxInputFile extends OxFormField {
               `)}
           </ul>`
             : html ``}
+      ${this.renderRefusals()} ${this.renderProgress()}
     `;
     }
+    renderQuiet() {
+        const files = this.value || [];
+        const busy = this.disabled || this.readonly || this.uploading;
+        const shown = this.hideFileList ? [] : files;
+        return html `
+      ${this.renderInput()}
+      ${shown.map(file => html `<span class="picked">
+          ${this.renderKind(file)}
+          <span class="name" title=${file.name}>${file.name}</span>
+          <span class="size">${megabytes(file.size)}</span>
+          ${!this.multiple
+            ? html `<button type="button" quiet small ?disabled=${busy} @click=${() => this.pick()}>
+                ${i18next.t('label.replace file', { defaultValue: 'replace' })}
+              </button>`
+            : nothing}
+          <button type="button" quiet small danger ?disabled=${busy} @click=${() => this.removeFile(file)}>
+            ${i18next.t('label.remove file', { defaultValue: 'remove' })}
+          </button>
+        </span>`)}
+      ${this.multiple || !shown.length
+            ? html `<button type="button" quiet small ?disabled=${busy} @click=${() => this.pick()}>
+            ${this.label || i18next.t('label.attach file', { defaultValue: 'attach' })}
+          </button>`
+            : nothing}
+      ${this.renderProgress()} ${this.renderRefusals()}
+    `;
+    }
+    /* A picture shows itself; anything else is told by its kind. */
+    renderKind(file) {
+        const preview = this.previews.get(file);
+        if (preview)
+            return html `<img src=${preview} alt="" />`;
+        const icon = file.type === 'application/pdf' ? 'picture_as_pdf' : 'draft';
+        return html `<md-icon>${icon}</md-icon>`;
+    }
+    renderProgress() {
+        if (!this.uploading)
+            return nothing;
+        const percent = Math.round(Math.min(1, Math.max(0, this.progress)) * 100);
+        return html `<span class="progress" role="status">
+      ${i18next.t('text.uploading file', { percent, defaultValue: `uploading ${percent}%` })}
+    </span>`;
+    }
+    renderRefusals() {
+        if (!this.refusals.length)
+            return nothing;
+        const { maxFileSize, maxFiles } = this.refusalLimits;
+        return html `<div class="refusal" role="alert">
+      ${this.refusals.map(({ file, reason }) => reason === 'type'
+            ? i18next.t('text.file refused for type', { name: file.name, defaultValue: `${file.name}: not a type taken here` })
+            : reason === 'size'
+                ? i18next.t('text.file refused for size', {
+                    name: file.name,
+                    limit: megabytes(maxFileSize),
+                    defaultValue: `${file.name}: over ${megabytes(maxFileSize)}`
+                })
+                : i18next.t('text.file refused for count', {
+                    name: file.name,
+                    limit: maxFiles,
+                    defaultValue: `${file.name}: ${maxFiles} files at most`
+                })).join(' · ')}
+    </div>`;
+    }
     updated(changes) {
         if (changes.has('value') && !(this.value instanceof Array)) {
             this.value = !this.value ? [] : [this.value];
         }
+        if (changes.has('value')) {
+            this.syncPreviews();
+        }
+        if (changes.has('dropTarget')) {
+            this.setDropArea();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated)
+            this.setDropArea();
     }
     firstUpdated() {
-        FileDropHelper.set(this);
-        this.addEventListener('file-drop', (e) => {
-            if (this.disabled) {
-                return;
+        this.setDropArea();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.undoDrop?.();
+        this.dropArea?.removeEventListener('file-drop', this.onFileDrop);
+        this.undoDrop = this.dropArea = undefined;
+        this.previews.forEach(url => URL.revokeObjectURL(url));
+        this.previews.clear();
+    }
+    setDropArea() {
+        const area = this.dropTarget || this;
+        if (area === this.dropArea)
+            return;
+        this.undoDrop?.();
+        this.dropArea?.removeEventListener('file-drop', this.onFileDrop);
+        this.dropArea = area;
+        this.undoDrop = FileDropHelper.set(area);
+        area.addEventListener('file-drop', this.onFileDrop);
+    }
+    syncPreviews() {
+        const files = this.value || [];
+        this.previews.forEach((url, file) => {
+            if (!files.includes(file)) {
+                URL.revokeObjectURL(url);
+                this.previews.delete(file);
+            }
+        });
+        if (!this.quiet)
+            return;
+        files.forEach(file => {
+            if (!this.previews.has(file) && file.type?.startsWith('image/')) {
+                this.previews.set(file, URL.createObjectURL(file));
             }
-            const detail = e.detail;
-            this.value = this.multiple ? detail : detail[0] ? [detail[0]] : [];
-            this._notifyChange();
         });
     }
     get files() {
         return this.value;
     }
+    /** Opens the file dialog — for an owner whose own button starts the pick. */
+    pick() {
+        if (this.disabled || this.readonly || this.uploading)
+            return;
+        this.fileInput?.click();
+    }
     reset() {
-        this.fileInput.value = '';
+        if (this.fileInput)
+            this.fileInput.value = '';
         this.value = [];
+        this.refusals = [];
         this._notifyChange();
     }
-    _onChangeValue(e) {
-        const fileInput = e.currentTarget;
+    removeFile(file) {
         const files = this.value || [];
-        this.value = this.attachFileList
-            ? [...files, ...Array.from(fileInput.files)]
-            : [...Array.from(fileInput.files)];
-        fileInput.files = null;
+        this.value = files.filter(one => one !== file);
+        this.refusals = [];
         this._notifyChange();
     }
+    async take(picked) {
+        const files = this.value || [];
+        const keep = this.attachFileList;
+        const limits = await fileUploadLimits();
+        const { taken, refused } = sortPickedFiles(picked, {
+            accept: this.accept,
+            limits,
+            already: keep ? files.length : 0
+        });
+        this.refusals = refused;
+        this.refusalLimits = limits;
+        if (!taken.length)
+            return;
+        this.value = keep ? [...files, ...taken] : taken;
+        this._notifyChange();
+    }
+    _onChangeValue(e) {
+        const fileInput = e.currentTarget;
+        const picked = Array.from(fileInput.files);
+        /* The same file picked again must still raise change. */
+        fileInput.value = '';
+        this.take(picked);
+    }
     _notifyChange() {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
@@ -201,9 +419,24 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'attach-filelist' })
 ], OxInputFile.prototype, "attachFileList", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxInputFile.prototype, "quiet", void 0);
+__decorate([
+    property({ attribute: false })
+], OxInputFile.prototype, "dropTarget", void 0);
+__decorate([
+    property({ type: Number })
+], OxInputFile.prototype, "progress", void 0);
 __decorate([
     query('#input-file')
 ], OxInputFile.prototype, "fileInput", void 0);
+__decorate([
+    state()
+], OxInputFile.prototype, "refusals", void 0);
+__decorate([
+    state()
+], OxInputFile.prototype, "refusalLimits", void 0);
 OxInputFile = __decorate([
     customElement('ox-input-file')
 ], OxInputFile);

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":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAe,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE/F,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE,CAClC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,IAAI,CAAA;AAElH;;;;;;;;;;;;;;GAcG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QA0IuB,SAAI,GAAY,QAAQ,CAAA;QAIpD,iBAAY,GAAY,KAAK,CAAA;QAE7B,mBAAc,GAAY,KAAK,CAAA;QAE/B,8EAA8E;QAClC,UAAK,GAAY,KAAK,CAAA;QAUjD,aAAQ,GAAkB,EAAE,CAAA;QAC5B,kBAAa,GAAgD,EAAE,CAAA;QAIxE,aAAQ,GAAG,IAAI,GAAG,EAAgB,CAAA;QAElC,eAAU,GAAG,CAAC,CAAQ,EAAE,EAAE;YAChC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACrD,OAAM;YACR,CAAC;YAED,MAAM,KAAK,GAAI,CAAiB,CAAC,MAAgB,CAAA;YACjD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QACtD,CAAC,CAAA;IAqQH,CAAC;aA/aQ,WAAM,GAAG;QACd,WAAW;QACX,eAAe;QACf,YAAY;QACZ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgIF;KACF,AArIY,CAqIZ;IAuCD,IAAY,SAAS;QACnB,OAAO,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAA;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAA;IAC3D,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,MAAM,IAAI,EAAE;kBACd,IAAI,CAAC,QAAQ;;;gBAGf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;kBAClC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;OACzC,CAAA;IACL,CAAC;IAEO,SAAS;QACf,IAAI,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEpC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,IAAI,QAAQ;;cAExB,IAAI,CAAC,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC;;QAEjG,IAAI,CAAC,WAAW,EAAE;;gCAEM,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;;QAEvG,CAAC,IAAI,CAAC,YAAY,IAAI,KAAK,EAAE,MAAM;YACnC,CAAC,CAAC,IAAI,CAAA;cACA,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;sBAEJ,IAAI,CAAC,IAAI;;6BAEF,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAM;gBACR,CAAC;gBACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;YACvB,CAAC;;;;eAIN,CACF;gBACG;YACR,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE;KACjD,CAAA;IACH,CAAC;IAEO,WAAW;QACjB,MAAM,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAA;QAC7D,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;QAE5C,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,WAAW,EAAE;QAClB,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;YACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;qCACI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI;+BAC5B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;YACvC,CAAC,IAAI,CAAC,QAAQ;YACd,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;kBAC/E,OAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;wBACtD;YACZ,CAAC,CAAC,OAAO;+DAC0C,IAAI,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;cAC3F,OAAO,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;;gBAExD,CACT;QACC,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM;YAC9B,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;cAC/E,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;oBAClE;YACZ,CAAC,CAAC,OAAO;QACT,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE;KACjD,CAAA;IACH,CAAC;IAED,gEAAgE;IACxD,UAAU,CAAC,IAAU;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACvC,IAAI,OAAO;YAAE,OAAO,IAAI,CAAA,YAAY,OAAO,YAAY,CAAA;QAEvD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAA;QACzE,OAAO,IAAI,CAAA,YAAY,IAAI,YAAY,CAAA;IACzC,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,OAAO,CAAA;QAEnC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAS,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;QAC1E,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,OAAO,GAAG,EAAE,CAAC;YAChF,CAAA;IACV,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,OAAO,CAAA;QAEzC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,aAAa,CAAA;QACpD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CACvC,MAAM,KAAK,MAAM;YACf,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,4BAA4B,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,IAAI,yBAAyB,EAAE,CAAC;YACnH,CAAC,CAAC,MAAM,KAAK,MAAM;gBACjB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,4BAA4B,EAAE;oBACtC,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,SAAS,CAAC,WAAY,CAAC;oBAC9B,YAAY,EAAE,GAAG,IAAI,CAAC,IAAI,UAAU,SAAS,CAAC,WAAY,CAAC,EAAE;iBAC9D,CAAC;gBACJ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,6BAA6B,EAAE;oBACvC,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,QAAQ;oBACf,YAAY,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,gBAAgB;iBACxD,CAAC,CACT,CAAC,IAAI,CAAC,KAAK,CAAC;WACR,CAAA;IACT,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3D,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9C,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,WAAW,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,WAAW,EAAE,CAAA;IACzC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAA;QACjB,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QAChE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QAEzC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;QACtD,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;IACvB,CAAC;IAEO,WAAW;QACjB,MAAM,IAAI,GAAgB,IAAI,CAAC,UAAU,IAAK,IAAoB,CAAA;QAClE,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ;YAAE,OAAM;QAElC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAA;QACjB,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QAEhE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IACrD,CAAC;IAEO,YAAY;QAClB,MAAM,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC1B,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;gBACxB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAM;QAEvB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAChE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAA;YACpD,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,6EAA6E;IAC7E,IAAI;QACF,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;YAAE,OAAM;QAC5D,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAA;IACzB,CAAC;IAED,KAAK;QACH,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;QAC7C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QACf,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;QAElB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,UAAU,CAAC,IAAU;QAC3B,MAAM,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,CAAA;QAC9C,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;QAClB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,KAAK,CAAC,IAAI,CAAC,MAAc;QAC/B,MAAM,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAA;QAChC,MAAM,MAAM,GAAG,MAAM,gBAAgB,EAAE,CAAA;QAEvC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE;YACjD,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM;YACN,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACjC,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAA;QAE3B,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAM;QAEzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;QAChD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,MAAM,SAAS,GAAG,CAAC,CAAC,aAAiC,CAAA;QACrD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAA;QAEtD,yDAAyD;QACzD,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;QAEpB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACnB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;;AAvS4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAqB;AAEhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAC1C;AAE7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;mDAC1C;AAGa;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAuB;AAGlC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CAAyB;AAG5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkB;AAEvB;IAArB,KAAK,CAAC,aAAa,CAAC;8CAA6B;AAEjC;IAAhB,KAAK,EAAE;6CAAqC;AAC5B;IAAhB,KAAK,EAAE;kDAAwE;AA9JrE,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAgbvB","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 { ButtonStyles, ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper, FileRefusal, fileUploadLimits, 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@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        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(: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        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      /* ── quiet ── no box: the words are the control. */\n      :host([quiet]) {\n        display: inline-flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n        font-size: var(--ui-t-body, 13px);\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      .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        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  @property({ type: String }) icon?: string = 'upload'\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  /** 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    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\" quiet small ?disabled=${busy} @click=${() => this.pick()}>\n                ${i18next.t('label.replace file', { defaultValue: 'replace' })}\n              </button>`\n            : nothing}\n          <button type=\"button\" 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\" quiet small ?disabled=${busy} @click=${() => this.pick()}>\n            ${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 = 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,103 @@
+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 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