@mmlogic/components 0.5.1 → 0.5.3

package/dist/collection/components/email/mrd-email-view/mrd-email-view.js

@@ -0,0 +1,247 @@
+import { Host, h } from "@stencil/core";
+import DOMPurify from "dompurify";
+import { t } from "../../../utils/i18n";
+import { formatDateTime } from "../../../utils/format";
+import { attachmentsFromRecord, attachmentsKey } from "../../../utils/document-attachments";
+/**
+ * Archetype-driven single-email view. Given a `commons.email` binding and a data
+ * record, renders the message the way an Outlook printout would — subject, a
+ * compact From/To/CC/Date header block, the body and attachments — instead of a
+ * generic field form. Fully read-only: emails arrive through other channels (mail
+ * ingestion gateways), never edited here.
+ *
+ * Like `mrd-document-view`/`mrd-invoice-view`, this component never resolves file
+ * hrefs itself — it only exposes attachment references via `mrdAttachments` (an
+ * email can have several) and plain download buttons; the host decides how/whether
+ * to render them.
+ */
+export class MrdEmailView {
+    constructor() {
+        /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
+        this.data = {};
+        this.locale = navigator.language;
+        /** Tracks the key attachments were last emitted for, so componentDidLoad and the
+         *  data watcher don't emit duplicate events for the same set of files. */
+        this.lastAttachmentKey = null;
+    }
+    componentDidLoad() {
+        this.emitAttachmentsIfNeeded();
+    }
+    dataChanged() {
+        this.emitAttachmentsIfNeeded();
+    }
+    emitAttachmentsIfNeeded() {
+        const attachments = attachmentsFromRecord(this.archetype, this.data, 'attachments');
+        const key = attachmentsKey(attachments);
+        if (key === this.lastAttachmentKey)
+            return;
+        this.lastAttachmentKey = key;
+        this.mrdAttachments.emit({ attachments });
+    }
+    /** Value of a value-slot: reads data[field] via the slot→field map. */
+    slotValue(slot) {
+        var _a, _b;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        return this.data[field];
+    }
+    /** Relation link for a relation-slot: reads data._links[field]. */
+    slotLink(slot) {
+        var _a, _b, _c, _d;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        const links = ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c._links) !== null && _d !== void 0 ? _d : {});
+        return links[field];
+    }
+    renderAddressRow(slot, label) {
+        var _a;
+        const link = this.slotLink(slot);
+        const entries = ((_a = link === null || link === void 0 ? void 0 : link.values) === null || _a === void 0 ? void 0 : _a.length)
+            ? link.values
+            : (link === null || link === void 0 ? void 0 : link.href) && (link === null || link === void 0 ? void 0 : link.name) ? [{ href: link.href, name: link.name }] : [];
+        if (!entries.length)
+            return null;
+        return (h("div", { class: "mrd-email-view__header-row" }, h("span", { class: "mrd-email-view__header-label" }, label), h("span", { class: "mrd-email-view__header-value" }, entries.map((entry, i) => (h("span", { key: entry.href }, h("button", { type: "button", class: "mrd-email-view__link", onClick: () => this.mrdNavigate.emit({ href: entry.href, label: entry.name }) }, entry.name), i < entries.length - 1 ? ', ' : ''))))));
+    }
+    renderContainer() {
+        const link = this.slotLink('container');
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("button", { type: "button", class: "mrd-email-view__container-link", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, link.name));
+    }
+    renderBody() {
+        const bodyHtmlRaw = this.slotValue('bodyHtml');
+        if (bodyHtmlRaw != null && bodyHtmlRaw !== '') {
+            return h("div", { class: "mrd-email-view__body-html", innerHTML: DOMPurify.sanitize(String(bodyHtmlRaw)) });
+        }
+        const bodyTextRaw = this.slotValue('bodyText');
+        if (bodyTextRaw != null && bodyTextRaw !== '') {
+            return h("div", { class: "mrd-email-view__body-text" }, String(bodyTextRaw));
+        }
+        return null;
+    }
+    renderHeaders() {
+        const headersRaw = this.slotValue('headers');
+        if (headersRaw == null || headersRaw === '')
+            return null;
+        return (h("details", { class: "mrd-email-view__headers" }, h("summary", null, t('email_show_headers', this.locale)), h("pre", { class: "mrd-email-view__headers-body" }, String(headersRaw))));
+    }
+    renderAttachments() {
+        const attachments = attachmentsFromRecord(this.archetype, this.data, 'attachments');
+        if (!attachments.length)
+            return null;
+        return (h("div", { class: "mrd-email-view__attachments" }, attachments.map(a => (h("button", { type: "button", key: a.href, class: "mrd-email-view__attachment", onClick: () => this.mrdDownload.emit({ href: a.href, fileName: a.fileName }) }, h("svg", { class: "mrd-email-view__attachment-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21.44 11.05l-9.19 9.19a5 5 0 01-7.07-7.07l9.19-9.19a3 3 0 014.24 4.24l-9.2 9.19a1 1 0 01-1.41-1.41l8.49-8.48" })), a.fileName)))));
+    }
+    render() {
+        const subjectRaw = this.slotValue('subject');
+        const subject = subjectRaw != null && subjectRaw !== '' ? String(subjectRaw) : null;
+        const dateRaw = this.slotValue('date');
+        return (h(Host, { key: '3f36e4df048a71075193d61d0455f94a9121cacf' }, h("div", { key: '164a3d686a462ede237d1aa0892c041ec7ee30b5', class: "mrd-email-view" }, subject && h("h1", { key: '46111bedb40e60189f00232ec5f670c9d027c781', class: "mrd-email-view__subject" }, subject), h("div", { key: '492616cf77aa2351c680509c14328178426be7ed', class: "mrd-email-view__header" }, this.renderAddressRow('from', t('email_from', this.locale)), this.renderAddressRow('to', t('email_to', this.locale)), this.renderAddressRow('cc', t('email_cc', this.locale)), dateRaw != null && dateRaw !== '' && (h("div", { key: 'bc89fb4adec45280b3cbb7216455a7a8a5530f51', class: "mrd-email-view__header-row" }, h("span", { key: '2c0a90c5061261b8b70ba3eb0bf8b9fab793cc7d', class: "mrd-email-view__header-label" }, t('email_date', this.locale)), h("span", { key: 'de3edda49ec15795c9e91297ade9535f06b53b29', class: "mrd-email-view__header-value" }, formatDateTime(dateRaw, this.locale))))), this.renderContainer(), h("div", { key: '6e834f73168f167dac9b90a492db168b0dacc62e', class: "mrd-email-view__divider" }), this.renderBody(), this.renderAttachments(), this.renderHeaders())));
+    }
+    static get is() { return "mrd-email-view"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-email-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-email-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "archetype": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype",
+                    "resolved": "ClientArchetype",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved `commons.email` binding: slot name \u2192 concrete field/relation name."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data record from the /data endpoint. Fields keyed by name; relations under `_links`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigate to a sender/recipient or the container. Host resolves the href and routes."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdDownload",
+                "name": "mrdDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Download an attachment. Host resolves the href to a signed URL."
+                },
+                "complexType": {
+                    "original": "{ href: string; fileName: string }",
+                    "resolved": "{ href: string; fileName: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdAttachments",
+                "name": "mrdAttachments",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The file(s) belonging to this email, fired once on load and again whenever the\nattachments slot's value changes. The host resolves the href(s) itself."
+                },
+                "complexType": {
+                    "original": "{ attachments: DocumentAttachment[] }",
+                    "resolved": "{ attachments: DocumentAttachment[]; }",
+                    "references": {
+                        "DocumentAttachment": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::DocumentAttachment",
+                            "referenceLocation": "DocumentAttachment"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "dataChanged"
+            }];
+    }
+}

package/dist/collection/components/fields/file-upload-common.js

@@ -1,8 +1,24 @@
 import { t } from "../../utils/i18n";
-/**
- * Shared upload behaviour for mrd-file-field and mrd-image-field:
- * file validation, drop-zone class building and drag-drop wiring.
- */
+/** True while the entry is still a local `File` awaiting upload resolution. */
+export function isPending(entry) {
+    return entry instanceof File;
+}
+/** Display name for an entry: the `File`'s own name, the resolved `fileName`, or — for the
+ *  legacy bare-href shape — a best-effort basename of the URI. */
+export function entryLabel(entry) {
+    var _a;
+    if (entry instanceof File)
+        return entry.name;
+    if (typeof entry !== 'string')
+        return entry.fileName || entry.href;
+    const base = (_a = entry.split('/').pop()) !== null && _a !== void 0 ? _a : entry;
+    try {
+        return decodeURIComponent(base);
+    }
+    catch (_b) {
+        return base;
+    }
+}
 /** Validates a selected/dropped file; returns a localised error message or '' when accepted. */
 export function validateUploadFile(file, maxSize, locale, requireImage = false) {
     if (maxSize > 0 && file.size > maxSize)
@@ -21,7 +37,7 @@ export function uploadZoneClass(base, opts) {
     ].filter(Boolean).join(' ');
 }
 /** Drag-drop handlers for the drop zone; the component owns the dragging state and file handling. */
-export function makeDragHandlers(setDragging, onFile) {
+export function makeDragHandlers(setDragging, onFiles) {
     return {
         onDragOver: (e) => {
             e.preventDefault();
@@ -29,10 +45,10 @@ export function makeDragHandlers(setDragging, onFile) {
         },
         onDragLeave: () => setDragging(false),
         onDrop: (e) => {
-            var _a, _b, _c;
+            var _a, _b;
             e.preventDefault();
             setDragging(false);
-            onFile((_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : null);
+            onFiles(Array.from((_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []));
         },
     };
 }

package/dist/collection/components/fields/mrd-boolean-field/mrd-boolean-field.js

@@ -20,7 +20,7 @@ export class MrdBooleanField {
         this.checked = !!this.value;
     }
     render() {
-        return (h(Host, { key: 'c0e92a50b1512d7b7f36f151b34bcb5b9497ca59' }, h("div", { key: 'e3f70c88321d8e72784b81092a9ebc0451ba330d', class: "mrd-boolean-field" }, h("label", { key: '3e6d907b72a5e1da7e268685c67811ebf264d5d8', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '2b6df62a72cba19aa26374a2448c26666e28b03d', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '77cbe5c1a25153de745f5e91eef589f40cb3237d', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '34daaa269ed64ed3be71ecfd15d79eb42d746247', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
+        return (h(Host, { key: 'd60835bfd40ab3708692991f3c9862dfcbe98191' }, h("div", { key: 'b6ab1893b75f2a826e4bbac11a465e3d2b88f5d7', class: "mrd-boolean-field" }, h("label", { key: '86562c85d903cbf7295e69a11c4c724f0f8beeb5', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '3e92957abb190ff8d0b9c3294c44cb27b81947d0', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: 'b632d9da279ebb823120e38540506568bff9ebbb', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '9e0eeb0ba9056bf5ae18b893c0566fed2ad2fda2', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
     }
     static get is() { return "mrd-boolean-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-currency-field/mrd-currency-field.js

@@ -42,7 +42,7 @@ export class MrdCurrencyField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '7265395c3b93c3b4daf4c4221da13e01b2fed2e8' }, h("div", { key: 'e644b67a7aba6e8f5b7175f5f79a4bf5e99cb611', class: "mrd-currency-field" }, h(FieldLabel, { key: 'd47a215c0684aea8a3253ae6edc4628d20733d90', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: 'b8f67f8188ad9cd8ba2b6869fcb2b4cd413dec32', class: "mrd-currency-field__row" }, h("input", { key: '8d643424d8932d11ceea0435353c54bc9399c187', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '55b12e960646c2420883df848ae440d45f808300', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'd0a6adbb83af8fde047eff22c8efd9bbe1ae638f', base: "mrd-currency-field", error: this.error }))));
+        return (h(Host, { key: 'e1a76ab778820c0d781d5ec1549448716d368c1f' }, h("div", { key: '8298720abac7f689fe3e697c3c4410702e6a87f2', class: "mrd-currency-field" }, h(FieldLabel, { key: 'b23782aef9a866f1fb72e152cb91aeae00a975fa', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '51e5177f9be3c5a6bdf3a5c1187f9261fcc349cf', class: "mrd-currency-field__row" }, h("input", { key: 'c6bda6cc92f3a2a34861d44b6163d417e200a6e4', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '29231cfa142d26aa81594609f1bf7bd5168df073', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'bea9615466427631f08a6ac8a779ae77695d36e3', base: "mrd-currency-field", error: this.error }))));
     }
     static get is() { return "mrd-currency-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-date-field/mrd-date-field.js

@@ -20,7 +20,7 @@ export class MrdDateField {
         };
     }
     render() {
-        return (h(Host, { key: 'c0b9d684c5e0b5e3da785c383472ed5d6c13c39f' }, h("div", { key: '304c9b5c9570a369258f5f6fd0877a01a87d98d5', class: "mrd-date-field" }, h(FieldLabel, { key: '72c5ec21699a314920ea1217aee9a353bc8b4b7e', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: 'be18df6c7e5fe89bf00cef38484711a9a685e0dc', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'f16ffb7e14f9ac9af4a34a96361a25dd4d738d68', base: "mrd-date-field", error: this.error }))));
+        return (h(Host, { key: 'd83beef11c2b9402e251a50885b92e7a057f02ee' }, h("div", { key: '6a26e4969e9bde8c5c87771d7b8c7b4d6c1dd942', class: "mrd-date-field" }, h(FieldLabel, { key: 'a7bc1b1c56e933a51f6b1b1feb794a4678d9d334', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: '82e3855654f3b3c554f80d647e783234cca8dae1', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '294b3cdc1004725267aa8265366f5009ab324203', base: "mrd-date-field", error: this.error }))));
     }
     static get is() { return "mrd-date-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-datetime-field/mrd-datetime-field.js

@@ -47,7 +47,7 @@ export class MrdDatetimeField {
         return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
     }
     render() {
-        return (h(Host, { key: '0ee285553f3d5e1a9984619795543d67d581c76f' }, h("div", { key: '2c93dffe3701da9099f4b34a9d7c1d0619fa824e', class: "mrd-datetime-field" }, h(FieldLabel, { key: 'ebda087fdcb2a956933758e6250a8e4dc0484ef9', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '06b012fc78c76e3b08ef24af5e134aa691975285', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '54e7acdd051c00893eb17cbf4911917fceddb54f', base: "mrd-datetime-field", error: this.error }))));
+        return (h(Host, { key: '6f8020590ac879992058aa9547b90c11250fa303' }, h("div", { key: '76abff48cae58d156540181a6577729a449bb888', class: "mrd-datetime-field" }, h(FieldLabel, { key: 'a8c3688980347a27d6467987f11a3c4135ac5234', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '1bb1aa7536a6a82313f51240030c828028cafd76', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'c97301640980bf04311751124fc8e87023d59f87', base: "mrd-datetime-field", error: this.error }))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-email-field/mrd-email-field.js

@@ -24,7 +24,7 @@ export class MrdEmailField {
         };
     }
     render() {
-        return (h(Host, { key: 'e113fb3958c06ee4d4e870b6005e07b1793835a1' }, h("div", { key: '9393b859167f1474d944575f464e1523f1dcf469', class: "mrd-email-field" }, h(FieldLabel, { key: '57c134921adb7f941c19d2fa36cce213bc12ae1e', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '67496689526d2fa96a087b00a9436e9de4d69415', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '5a151c2995db77771fe8f98a24c627b0060f655a', base: "mrd-email-field", error: this.error }))));
+        return (h(Host, { key: '3253124dadc7f0b3f120c11f8c35604a2f671b0a' }, h("div", { key: 'db820652452145c30f21b41a65942c0a4c6f45f1', class: "mrd-email-field" }, h(FieldLabel, { key: '8b1c5a84afce9fd18c3f644e5c92f07363e116d4', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: 'dc4bada3208aa6cb7585b1872f53605177371493', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'c44377d1b6a4a4c468b080b23eecd4ba9ca326e1', base: "mrd-email-field", error: this.error }))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-file-field/mrd-file-field.css

@@ -92,6 +92,25 @@
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-700);
 }
+.mrd-file-field__list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  margin: var(--mrd-space-2) 0 0;
+  padding: 0;
+}
+.mrd-file-field__item {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-sm);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+}
 .mrd-file-field__icon {
   width: 20px;
   height: 20px;
@@ -100,10 +119,10 @@
 }
 .mrd-file-field__filename {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 200px;
 }
 .mrd-file-field__clear {
   background: none;

package/dist/collection/components/fields/mrd-file-field/mrd-file-field.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { t } from "../../../utils/i18n";
 import { FieldLabel, FieldError } from "../field-helpers";
-import { validateUploadFile, uploadZoneClass, makeDragHandlers } from "../file-upload-common";
+import { isPending, entryLabel, validateUploadFile, uploadZoneClass, makeDragHandlers } from "../file-upload-common";
 export class MrdFileField {
     constructor() {
         this.name = '';
@@ -12,69 +12,107 @@ export class MrdFileField {
         this.locale = navigator.language;
         this.accept = '';
         this.maxSize = 0; // bytes, 0 = no limit
-        this.fileName = '';
+        this.multiple = false;
+        /** Working copy of the field's files, kept in sync with `value`. Entries still
+         *  a `File` are pending upload; resolved entries are `{ href, fileName }` (or a
+         *  bare href string for older hosts). */
+        this.entries = [];
         this.isDragging = false;
-        this.uploading = false;
         this.error = '';
         this.handleInputChange = (e) => {
             var _a;
-            const files = e.target.files;
-            this.handleFile((_a = files === null || files === void 0 ? void 0 : files[0]) !== null && _a !== void 0 ? _a : null);
+            const input = e.target;
+            this.addFiles(Array.from((_a = input.files) !== null && _a !== void 0 ? _a : []));
+            input.value = '';
         };
-        this.drag = makeDragHandlers(dragging => (this.isDragging = dragging), file => this.handleFile(file));
+        this.drag = makeDragHandlers(dragging => (this.isDragging = dragging), files => this.addFiles(files));
         this.handleZoneClick = () => {
             var _a;
-            if (!this.disabled && !this.uploading) {
+            if (!this.disabled && !this.zoneBusy) {
                 (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
             }
         };
-        this.handleClear = (e) => {
+        this.handleRemove = (index) => (e) => {
             e.stopPropagation();
-            this.fileName = '';
+            const next = this.entries.filter((_, i) => i !== index);
+            this.entries = next;
             this.error = '';
-            this.uploading = false;
             if (this.fileInputRef)
                 this.fileInputRef.value = '';
-            this.mrdChange.emit({ name: this.name, value: null });
+            this.emitValue(next);
         };
     }
-    /** When the host provides a URI back via setFieldValue, the upload is done. */
-    valueChanged(newVal) {
-        if (typeof newVal === 'string' && newVal) {
-            this.uploading = false;
+    componentWillLoad() {
+        this.syncEntriesFromValue();
+    }
+    /** The host (via mrd-form.setFieldValue) is the source of truth once a value round-trips back. */
+    valueChanged() {
+        this.syncEntriesFromValue();
+    }
+    syncEntriesFromValue() {
+        const v = this.value;
+        if (this.multiple) {
+            this.entries = Array.isArray(v) ? [...v] : v ? [v] : [];
         }
-        else if (!newVal) {
-            this.uploading = false;
-            this.fileName = '';
+        else {
+            this.entries = v ? [v] : [];
         }
     }
-    handleFile(file) {
-        if (!file) {
-            this.fileName = '';
-            this.uploading = false;
-            this.mrdChange.emit({ name: this.name, value: null });
+    emitValue(entries) {
+        var _a;
+        const value = this.multiple ? entries : (_a = entries[0]) !== null && _a !== void 0 ? _a : null;
+        this.mrdChange.emit({ name: this.name, value: value });
+    }
+    addFiles(files) {
+        if (this.disabled || this.zoneBusy)
+            return;
+        const candidates = this.multiple ? files : files.slice(0, 1);
+        if (!candidates.length)
             return;
+        const accepted = [];
+        let uploadError = '';
+        for (const file of candidates) {
+            const err = validateUploadFile(file, this.maxSize, this.locale);
+            if (err) {
+                uploadError = err;
+                continue;
+            }
+            accepted.push(file);
         }
-        const uploadError = validateUploadFile(file, this.maxSize, this.locale);
-        if (uploadError) {
-            this.error = uploadError;
+        this.error = uploadError;
+        if (!accepted.length)
             return;
+        const next = this.multiple ? [...this.entries, ...accepted] : [accepted[0]];
+        this.entries = next;
+        this.emitValue(next);
+        for (const file of accepted) {
+            this.mrdUpload.emit({ name: this.name, file });
         }
-        this.error = '';
-        this.fileName = file.name;
-        this.uploading = true;
-        this.mrdChange.emit({ name: this.name, value: file });
-        this.mrdUpload.emit({ name: this.name, file });
+    }
+    /** In single mode, block re-selection while the one file is still uploading;
+     *  in multiple mode, more files can always be added alongside pending uploads. */
+    get zoneBusy() {
+        return !this.multiple && this.entries.some(isPending);
+    }
+    /** Icon/spinner + filename + remove button — the caller supplies the wrapping element
+     *  (a plain row for single mode, an `<li>` for the multi-mode list). */
+    renderEntry(entry, index) {
+        const uploading = isPending(entry);
+        return [
+            uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))),
+            h("span", { class: "mrd-file-field__filename" }, entryLabel(entry)),
+            !uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleRemove(index), "aria-label": t('remove', this.locale) }, "\u2715")),
+        ];
     }
     render() {
-        const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
         const hasError = !!this.error;
+        const hasEntries = this.entries.length > 0;
         const zoneClass = uploadZoneClass('mrd-file-field', {
             dragging: this.isDragging,
             error: hasError,
-            disabled: this.disabled || this.uploading,
+            disabled: this.disabled || this.zoneBusy,
         });
-        return (h(Host, { key: '6410e945bb873a05d0a1b3be45bc879b5e153a05' }, h("div", { key: '4d1d69d768b383f0d9190f88a50a87de8679d3d2', class: "mrd-file-field" }, h(FieldLabel, { key: '7e0009908fb4c087de16cf08251ab398199dae60', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '88dfc0d1c34670f7de8f3cf2dea4c95b0ae66f4c', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'b6d678b5582a58721c928cef47dd8d6645b26a86', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '80f1698819c60b15476b953f5f3216f195430b84', base: "mrd-file-field", error: this.error }))));
+        return (h(Host, { key: '2e740a0857b069740a6a13616d0a0dfee2b945be' }, h("div", { key: '069b25ced3b2f1ce547819086dadbd53ade2378c', class: "mrd-file-field" }, h(FieldLabel, { key: 'd13f3cb0af766d6328772dab865b2079c85ec075', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '9ffdbb508e3934854034c46e6f719a88d4175920', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'c5d6954b8fa050889b5b65e15fde229dd64d7cc7', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, multiple: this.multiple, disabled: this.disabled || this.zoneBusy, required: this.required && !hasEntries, onChange: this.handleInputChange }), hasEntries && !this.multiple ? (h("div", { class: "mrd-file-field__selected" }, this.renderEntry(this.entries[0], 0))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), this.multiple && hasEntries && (h("ul", { key: '910a3e89f74d93ab16fb9f677a4276d5ad88897d', class: "mrd-file-field__list" }, this.entries.map((entry, index) => (h("li", { class: "mrd-file-field__item", key: `${index}-${entryLabel(entry)}` }, this.renderEntry(entry, index)))))), h(FieldError, { key: '4f0f071b0a1460ea1d6067a8fa4f588ebc620f2a', base: "mrd-file-field", error: this.error }))));
     }
     static get is() { return "mrd-file-field"; }
     static get encapsulation() { return "scoped"; }
@@ -247,14 +285,33 @@ export class MrdFileField {
                 "reflect": false,
                 "attribute": "max-size",
                 "defaultValue": "0"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "fileName": {},
+            "entries": {},
             "isDragging": {},
-            "uploading": {},
             "error": {}
         };
     }
@@ -270,12 +327,14 @@ export class MrdFileField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name: string; value: File | null }",
-                    "resolved": "{ name: string; value: File | null; }",
+                    "original": "{ name: string; value: FileEntry | FileEntry[] | null }",
+                    "resolved": "{ name: string; value: FileEntry | FileEntry[] | null; }",
                     "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
+                        "FileEntry": {
+                            "location": "import",
+                            "path": "../file-upload-common",
+                            "id": "src/components/fields/file-upload-common.ts::FileEntry",
+                            "referenceLocation": "FileEntry"
                         }
                     }
                 }
@@ -290,12 +349,14 @@ export class MrdFileField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name: string; value: File | null }",
-                    "resolved": "{ name: string; value: File | null; }",
+                    "original": "{ name: string; value: FileEntry | FileEntry[] | null }",
+                    "resolved": "{ name: string; value: FileEntry | FileEntry[] | null; }",
                     "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
+                        "FileEntry": {
+                            "location": "import",
+                            "path": "../file-upload-common",
+                            "id": "src/components/fields/file-upload-common.ts::FileEntry",
+                            "referenceLocation": "FileEntry"
                         }
                     }
                 }
@@ -307,7 +368,7 @@ export class MrdFileField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a file is selected and needs to be uploaded.\nHost should upload the file and call form.setFieldValue(name, uri) with the result."
+                    "text": "Emitted once per selected/dropped file that needs to be uploaded.\nHost should upload the file and call form.setFieldValue(name, { href, fileName: file.name }, file)\nwith the result \u2014 passing `file` back lets mrd-form resolve the right entry in a `multiple` field."
                 },
                 "complexType": {
                     "original": "{ name: string; file: File }",