@operato/input 10.29.30 → 10.29.37

package/dist/src/ox-form-field.js

@@ -88,6 +88,11 @@ export class OxFormField extends LitElement {
             values = [this.value];
         }
         values.forEach(value => {
+            /* A file goes as itself, name and all; turned to JSON it was "{}". */
+            if (value instanceof Blob) {
+                formData.append(this.name, value);
+                return;
+            }
             formData.append(this.name, typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value));
         });
     }

package/dist/src/ox-form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\n/**\n * 모든 입력 컴포넌트의 기반 계약.\n *\n * ## 상태 계약\n * `disabled` / `readonly` / `required` / `invalid` 는 **attribute 로 reflect** 된다.\n * 그래야 `InputStyles` 의 `:host([disabled])` · `:host([readonly])` · `:host([invalid])` 가\n * **마크업으로 설정했을 때뿐 아니라 프로퍼티로 설정했을 때도** 시각에 반영된다.\n * (reflect 가 없으면 `el.disabled = true` 는 화면에 나타나지 않는다.)\n *\n * ## disabled 와 readonly 의 구분\n * - `disabled`: 상호작용 불가 · 흐리게 · **폼 데이터에 포함되지 않음**(HTML 표준 거동)\n * - `readonly`: 값을 **보고 선택·복사할 수 있으나** 수정 불가 · **폼 데이터에는 포함됨**\n *   → 조회 화면을 `disabled` 로 잠그면 흐려지고 값도 전송되지 않으므로 `readonly` 를 쓴다.\n *\n * ## 검증\n * `checkValidity()` 가 `invalid` 를 갱신하고 결과를 반환한다.\n * 컴포넌트별 규칙(형식·범위 등)이 있으면 `validateValue()` 를 오버라이드한다(기본은 `required` 만 검사).\n */\nexport abstract class OxFormField<T = any> extends LitElement {\n  @property({ type: String, attribute: true }) name?: string\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  /** 값 표시·선택은 되지만 수정 불가. disabled 와 달리 폼 데이터에 포함된다. */\n  @property({ type: Boolean, reflect: true }) readonly?: boolean\n\n  /** 값이 반드시 있어야 함. checkValidity() 의 기준. */\n  @property({ type: Boolean, reflect: true }) required?: boolean\n\n  /** 검증 실패 상태. InputStyles 가 error 색으로 표시한다. */\n  @property({ type: Boolean, reflect: true }) invalid?: boolean\n\n  /** 비어 있을 때 보여줄 안내 문구(컴포넌트가 지원하는 경우). */\n  @property({ type: String }) placeholder?: string\n\n  @property() value?: T\n\n  protected _form: HTMLFormElement | null = null\n  protected _formdataEventHandler: EventListener | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n\n    if (this.name) {\n      this._form = this.closest('form')\n      if (this._form) {\n        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n        this._form.addEventListener('formdata', this._formdataEventHandler)\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    if (this._form) {\n      this._form.removeEventListener('formdata', this._formdataEventHandler!)\n      this._form = null\n      this._formdataEventHandler = null\n    }\n  }\n\n  /**\n   * 값이 비었는지 판단. 문자열·배열·nullish 를 다룬다.\n   * 숫자 `0` 과 `false` 는 **유효한 값**이므로 비었다고 보지 않는다.\n   */\n  protected isEmpty(): boolean {\n    const value = this.value as unknown\n\n    if (value === undefined || value === null) return true\n    if (typeof value === 'string') return value.trim().length === 0\n    if (Array.isArray(value)) return value.length === 0\n\n    return false\n  }\n\n  /**\n   * 자체 검증 규칙. 기본은 `required` 만 검사한다.\n   * 컴포넌트별 규칙이 있으면 오버라이드한다.\n   */\n  protected validateValue(): boolean {\n    return !(this.required && this.isEmpty())\n  }\n\n  /**\n   * 검증을 실행해 `invalid` 를 갱신하고 결과를 반환한다.\n   * 실패 시 `invalid` 이벤트를 올려 폼이 반응할 수 있게 한다.\n   */\n  checkValidity(): boolean {\n    const valid = this.validateValue()\n\n    this.invalid = !valid\n    if (!valid) {\n      this.dispatchEvent(new CustomEvent('invalid', { bubbles: true, composed: true, detail: { field: this.name } }))\n    }\n\n    return valid\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n    /* disabled 컨트롤은 폼 데이터에 포함하지 않는다(HTML 표준 거동).\n       readonly 는 수정만 막는 상태이므로 포함한다. */\n    if (this.disabled) return\n\n    let values: T | T[] = this.value!\n    if (!(values instanceof Array)) {\n      values = [this.value] as T[]\n    }\n\n    values.forEach(value => {\n      formData.append(\n        this.name!,\n        typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n      )\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\n/**\n * 모든 입력 컴포넌트의 기반 계약.\n *\n * ## 상태 계약\n * `disabled` / `readonly` / `required` / `invalid` 는 **attribute 로 reflect** 된다.\n * 그래야 `InputStyles` 의 `:host([disabled])` · `:host([readonly])` · `:host([invalid])` 가\n * **마크업으로 설정했을 때뿐 아니라 프로퍼티로 설정했을 때도** 시각에 반영된다.\n * (reflect 가 없으면 `el.disabled = true` 는 화면에 나타나지 않는다.)\n *\n * ## disabled 와 readonly 의 구분\n * - `disabled`: 상호작용 불가 · 흐리게 · **폼 데이터에 포함되지 않음**(HTML 표준 거동)\n * - `readonly`: 값을 **보고 선택·복사할 수 있으나** 수정 불가 · **폼 데이터에는 포함됨**\n *   → 조회 화면을 `disabled` 로 잠그면 흐려지고 값도 전송되지 않으므로 `readonly` 를 쓴다.\n *\n * ## 검증\n * `checkValidity()` 가 `invalid` 를 갱신하고 결과를 반환한다.\n * 컴포넌트별 규칙(형식·범위 등)이 있으면 `validateValue()` 를 오버라이드한다(기본은 `required` 만 검사).\n */\nexport abstract class OxFormField<T = any> extends LitElement {\n  @property({ type: String, attribute: true }) name?: string\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  /** 값 표시·선택은 되지만 수정 불가. disabled 와 달리 폼 데이터에 포함된다. */\n  @property({ type: Boolean, reflect: true }) readonly?: boolean\n\n  /** 값이 반드시 있어야 함. checkValidity() 의 기준. */\n  @property({ type: Boolean, reflect: true }) required?: boolean\n\n  /** 검증 실패 상태. InputStyles 가 error 색으로 표시한다. */\n  @property({ type: Boolean, reflect: true }) invalid?: boolean\n\n  /** 비어 있을 때 보여줄 안내 문구(컴포넌트가 지원하는 경우). */\n  @property({ type: String }) placeholder?: string\n\n  @property() value?: T\n\n  protected _form: HTMLFormElement | null = null\n  protected _formdataEventHandler: EventListener | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n\n    if (this.name) {\n      this._form = this.closest('form')\n      if (this._form) {\n        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n        this._form.addEventListener('formdata', this._formdataEventHandler)\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    if (this._form) {\n      this._form.removeEventListener('formdata', this._formdataEventHandler!)\n      this._form = null\n      this._formdataEventHandler = null\n    }\n  }\n\n  /**\n   * 값이 비었는지 판단. 문자열·배열·nullish 를 다룬다.\n   * 숫자 `0` 과 `false` 는 **유효한 값**이므로 비었다고 보지 않는다.\n   */\n  protected isEmpty(): boolean {\n    const value = this.value as unknown\n\n    if (value === undefined || value === null) return true\n    if (typeof value === 'string') return value.trim().length === 0\n    if (Array.isArray(value)) return value.length === 0\n\n    return false\n  }\n\n  /**\n   * 자체 검증 규칙. 기본은 `required` 만 검사한다.\n   * 컴포넌트별 규칙이 있으면 오버라이드한다.\n   */\n  protected validateValue(): boolean {\n    return !(this.required && this.isEmpty())\n  }\n\n  /**\n   * 검증을 실행해 `invalid` 를 갱신하고 결과를 반환한다.\n   * 실패 시 `invalid` 이벤트를 올려 폼이 반응할 수 있게 한다.\n   */\n  checkValidity(): boolean {\n    const valid = this.validateValue()\n\n    this.invalid = !valid\n    if (!valid) {\n      this.dispatchEvent(new CustomEvent('invalid', { bubbles: true, composed: true, detail: { field: this.name } }))\n    }\n\n    return valid\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n    /* disabled 컨트롤은 폼 데이터에 포함하지 않는다(HTML 표준 거동).\n       readonly 는 수정만 막는 상태이므로 포함한다. */\n    if (this.disabled) return\n\n    let values: T | T[] = this.value!\n    if (!(values instanceof Array)) {\n      values = [this.value] as T[]\n    }\n\n    values.forEach(value => {\n      /* A file goes as itself, name and all; turned to JSON it was \"{}\". */\n      if (value instanceof Blob) {\n        formData.append(this.name!, value)\n        return\n      }\n\n      formData.append(\n        this.name!,\n        typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n      )\n    })\n  }\n}\n"]}

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

@@ -3,22 +3,81 @@
  */
 import '@material/web/icon/icon.js';
 import { PropertyValues } from 'lit';
+import { FileUploadLimits } from '@operato/utils';
 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.
+ *
+ * A panel with its own look styles the quiet buttons through `::part(attach | replace | remove)` and puts its
+ * own icon in the attach button through `slot="icon"`. File names are shown as written.
+ */
 export declare class OxInputFile extends OxFormField {
     static styles: import("lit").CSSResult[];
     multiple?: boolean;
     accept?: string;
+    /** The drop box's icon (upload when not given); in the quiet look, shown before the attach word only when given. */
     icon?: string;
     label?: string;
     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;
+    /**
+     * The owner's own button (a page action) calls `pick()`: the picker draws no button of its own, only what it
+     * refused and the upload progress, where the owner placed it.
+     */
+    outsideTrigger: boolean;
+    /**
+     * A screen's own limits, handed down by the server (an AI mode's attachment policy) — never written on the screen.
+     * The picker uses the tighter of these and the server's upload limits.
+     */
+    limits?: FileUploadLimits;
+    /** The file is read in the browser and never uploaded: the server's upload limits do not apply (accept still does). */
+    local: boolean;
+    /** 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,63 @@
  */
 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 { actionHeight, ButtonStyles, ScrollbarStyles } from '@operato/styles';
+import { FileDropHelper, fileUploadLimits, narrowLimits, 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.
+ *
+ * A panel with its own look styles the quiet buttons through `::part(attach | replace | remove)` and puts its
+ * own icon in the attach button through `slot="icon"`. File names are shown as written.
+ */
 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;
+        /**
+         * The owner's own button (a page action) calls `pick()`: the picker draws no button of its own, only what it
+         * refused and the upload progress, where the owner placed it.
+         */
+        this.outsideTrigger = false;
+        /** The file is read in the browser and never uploaded: the server's upload limits do not apply (accept still does). */
+        this.local = 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);
@@ -29,23 +67,22 @@ let OxInputFile = class OxInputFile extends OxFormField {
         justify-content: center;
         padding: calc(var(--ox-input-gap) * 2);
         min-height: 100px;
-        text-transform: capitalize;
 
         border: 1px dashed var(--md-sys-color-outline-variant);
         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);
       }
@@ -58,7 +95,6 @@ let OxInputFile = class OxInputFile extends OxFormField {
         position: relative;
         width: auto;
         border: none;
-        text-transform: capitalize;
 
         padding: var(--file-uploader-label-padding);
         border-radius: var(--file-uploader-label-border-radius);
@@ -95,27 +131,98 @@ let OxInputFile = class OxInputFile extends OxFormField {
       li md-icon:active {
         color: var(--md-sys-color-error);
       }
+
+      /* ── quiet ── no box: the words are the control. */
+      /* --ox-actions-align: a section heading's actions slot says end, and the refusal line follows it. */
+      :host([quiet]) {
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: var(--ox-actions-align, start);
+        gap: var(--spacing-small, 4px);
+        /* The name reads at the size of what is around it (a form row, a heading); the buttons keep theirs. */
+        font-size: inherit;
+        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;
+      }
+
+      /* A place that is tapped with a thumb (a phone form) raises it; a heading or a row keeps the cell height. */
+      :host([quiet]) button {
+        height: var(--ox-input-file-action-height, ${actionHeight('--cell-action-height')});
+      }
+
+      .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%;
+        text-align: var(--ox-actions-align, start);
+        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 +234,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 +242,173 @@ 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;
+        if (this.outsideTrigger) {
+            return html `${this.renderInput()} ${this.renderProgress()} ${this.renderRefusals()}`;
+        }
+        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" part="replace" quiet small ?disabled=${busy} @click=${() => this.pick()}>
+                ${i18next.t('label.replace file', { defaultValue: 'replace' })}
+              </button>`
+            : nothing}
+          <button type="button" part="remove" 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" part="attach" quiet small ?disabled=${busy} @click=${() => this.pick()}>
+            <slot name="icon">${this.icon ? html `<md-icon>${this.icon}</md-icon>` : nothing}</slot>${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 = files.filter(one => one !== file);
+        this.refusals = [];
+        this._notifyChange();
+    }
+    async take(picked) {
         const files = this.value || [];
-        this.value = this.attachFileList
-            ? [...files, ...Array.from(fileInput.files)]
-            : [...Array.from(fileInput.files)];
-        fileInput.files = null;
+        const keep = this.attachFileList;
+        const limits = this.local ? narrowLimits(this.limits) : narrowLimits(this.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 +438,33 @@ __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: Boolean, reflect: true, attribute: 'outside-trigger' })
+], OxInputFile.prototype, "outsideTrigger", void 0);
+__decorate([
+    property({ attribute: false })
+], OxInputFile.prototype, "limits", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxInputFile.prototype, "local", 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);