@mmlogic/components 0.5.2 → 0.5.3

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 }",

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

@@ -89,6 +89,7 @@
   width: 100%;
 }
 .mrd-image-field__preview-thumb {
+  position: relative;
   flex-shrink: 0;
   width: 80px;
   height: 80px;
@@ -159,6 +160,49 @@
   background-color: var(--mrd-color-danger);
   color: var(--mrd-color-white);
 }
+.mrd-image-field__grid {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mrd-space-3);
+  margin: var(--mrd-space-2) 0 0;
+  padding: 0;
+}
+.mrd-image-field__grid-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  width: 88px;
+}
+.mrd-image-field__grid-name {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-600);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mrd-image-field__grid-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  line-height: 1;
+  background-color: var(--mrd-color-white);
+  color: var(--mrd-color-neutral-500);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: var(--mrd-font-size-xs);
+}
+.mrd-image-field__grid-remove:hover {
+  color: var(--mrd-color-danger);
+  border-color: var(--mrd-color-danger);
+}
 
 @keyframes mrd-spin {
   to {

package/dist/collection/components/fields/mrd-image-field/mrd-image-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 MrdImageField {
     constructor() {
         this.name = '';
@@ -12,79 +12,125 @@ export class MrdImageField {
         this.locale = navigator.language;
         this.accept = 'image/*';
         this.maxSize = 0;
-        this.previewUrl = '';
-        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 = '';
+        /** Local data-URL previews for pending File entries, keyed by File reference. */
+        this.previewCache = new Map();
         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.previewUrl = '';
-            this.fileName = '';
+            const removed = this.entries[index];
+            if (removed instanceof File)
+                this.previewCache.delete(removed);
+            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;
-        }
-        else if (!newVal) {
-            this.uploading = false;
-            this.previewUrl = '';
-            this.fileName = '';
-        }
+    componentWillLoad() {
+        this.syncEntriesFromValue();
     }
-    handleFile(file) {
-        if (!file) {
-            this.previewUrl = '';
-            this.fileName = '';
-            this.uploading = false;
-            this.mrdChange.emit({ name: this.name, value: null });
-            return;
+    /** 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] : [];
         }
-        const uploadError = validateUploadFile(file, this.maxSize, this.locale, true);
-        if (uploadError) {
-            this.error = uploadError;
-            return;
+        else {
+            this.entries = v ? [v] : [];
         }
-        this.error = '';
-        this.fileName = file.name;
-        this.uploading = true;
-        // Show local preview immediately while upload is in progress
+    }
+    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 });
+    }
+    readPreview(file) {
         const reader = new FileReader();
-        reader.onload = (ev) => {
+        reader.onload = ev => {
             var _a;
-            this.previewUrl = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result;
+            this.previewCache.set(file, (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result);
+            this.entries = [...this.entries]; // trigger re-render now that the preview is ready
         };
         reader.readAsDataURL(file);
-        this.mrdChange.emit({ name: this.name, value: file });
-        this.mrdUpload.emit({ name: this.name, file });
+    }
+    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, true);
+            if (err) {
+                uploadError = err;
+                continue;
+            }
+            accepted.push(file);
+        }
+        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.readPreview(file);
+            this.mrdUpload.emit({ name: this.name, file });
+        }
+    }
+    /** In single mode, block re-selection while the one image is still uploading;
+     *  in multiple mode, more images can always be added alongside pending uploads. */
+    get zoneBusy() {
+        return !this.multiple && this.entries.some(isPending);
+    }
+    renderThumb(entry) {
+        const uploading = isPending(entry);
+        const previewUrl = uploading ? this.previewCache.get(entry) : null;
+        return (h("div", { class: "mrd-image-field__preview-thumb" }, previewUrl && h("img", { class: "mrd-image-field__preview", src: previewUrl, alt: entryLabel(entry) }), uploading && (h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner", "aria-label": t('loading', this.locale) })))));
+    }
+    renderSingle(entry) {
+        const uploading = isPending(entry);
+        return (h("div", { class: "mrd-image-field__preview-container" }, this.renderThumb(entry), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, entryLabel(entry)), uploading && h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale))), !uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleRemove(0), "aria-label": t('remove', this.locale) }, t('remove', this.locale)))));
+    }
+    renderGridItem(entry, index) {
+        const uploading = isPending(entry);
+        return (h("li", { class: "mrd-image-field__grid-item", key: `${index}-${entryLabel(entry)}` }, this.renderThumb(entry), h("span", { class: "mrd-image-field__grid-name" }, entryLabel(entry)), !uploading && (h("button", { class: "mrd-image-field__grid-remove", type: "button", onClick: this.handleRemove(index), "aria-label": t('remove', this.locale) }, "\u2715"))));
     }
     render() {
         const hasError = !!this.error;
+        const hasEntries = this.entries.length > 0;
         const zoneClass = uploadZoneClass('mrd-image-field', {
             dragging: this.isDragging,
             error: hasError,
-            disabled: this.disabled || this.uploading,
+            disabled: this.disabled || this.zoneBusy,
         });
-        return (h(Host, { key: '700310af716dcc167f98bc7ae7024bb44e1285b6' }, h("div", { key: '95d29a82751249e560404488fb279138eee0c1be', class: "mrd-image-field" }, h(FieldLabel, { key: 'f53f040257a4b65d8435c836846adab137b91a5e', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: 'a9cc7a0861b1457d8e4abb11b380b6eeb519a863', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '7112030bc2b80b4c3b31a4421656da4c926a2fe1', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '0cf5346ecb1a5d110822b087081b4b5f05255381', base: "mrd-image-field", error: this.error }))));
+        return (h(Host, { key: '51d39ea80195565a5dc780ff6a7923a976cfb0a7' }, h("div", { key: 'd76edb7ac9f1efea8c7c3d5b04e906ad4ab4c761', class: "mrd-image-field" }, h(FieldLabel, { key: 'b46a67a76188047677c40ce3f406daed7d8de141', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: '0156a9722ea48d84e3ea1a829e4266425a594a6a', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '1b8e41da71bb57254bfd2e5527b05e1aeb32eb2f', ref: el => (this.fileInputRef = el), class: "mrd-image-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 ? (this.renderSingle(this.entries[0])) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), this.multiple && hasEntries && (h("ul", { key: '9211b5212eae0629f7c9b2b49d80e2b658a9ddd3', class: "mrd-image-field__grid" }, this.entries.map((entry, index) => this.renderGridItem(entry, index)))), h(FieldError, { key: '5f49c03156ed18e7c8307adff679b149658ca4a6', base: "mrd-image-field", error: this.error }))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }
@@ -257,15 +303,33 @@ export class MrdImageField {
                 "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 {
-            "previewUrl": {},
-            "fileName": {},
+            "entries": {},
             "isDragging": {},
-            "uploading": {},
             "error": {}
         };
     }
@@ -281,12 +345,14 @@ export class MrdImageField {
                     "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"
                         }
                     }
                 }
@@ -301,12 +367,14 @@ export class MrdImageField {
                     "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"
                         }
                     }
                 }
@@ -318,7 +386,7 @@ export class MrdImageField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when an image 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 image 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 }",

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

@@ -21,7 +21,7 @@ export class MrdLongtextField {
         };
     }
     render() {
-        return (h(Host, { key: 'b27d14772f5184d41c178606629a9945120296ef' }, h("div", { key: '206b1b9ee1d37e05680e31bf8b324455867fd93b', class: "mrd-longtext-field" }, h(FieldLabel, { key: '0b6f4959f32a097907965753ed8708d7580aee53', base: "mrd-longtext-field", label: this.label, required: this.required }), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: controlClass('mrd-longtext-field', !!this.error), name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), h(FieldError, { key: '0803cf0c1b6409e6c8a65121efef97d28d870119', base: "mrd-longtext-field", error: this.error }))));
+        return (h(Host, { key: 'e53fec4d4eafbd68d9cffb1f064d8e0c4c37839c' }, h("div", { key: '8843a23e42b0545c269fc6c924e7ae295770064e', class: "mrd-longtext-field" }, h(FieldLabel, { key: '8767676dd35f25f9bf5ebdb26887edc0882582e0', base: "mrd-longtext-field", label: this.label, required: this.required }), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: controlClass('mrd-longtext-field', !!this.error), name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), h(FieldError, { key: '54dc790173575e8a02764e5b14040b900c2eb609', base: "mrd-longtext-field", error: this.error }))));
     }
     static get is() { return "mrd-longtext-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -70,7 +70,7 @@ export class MrdNumberField {
         const hasError = !!this.error;
         const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: '90cae99b332f9554bc80d4044fce892ae37a48cf' }, h("div", { key: '26a9cfcc662eaeb571d17785f10f74269cf78537', class: "mrd-number-field" }, h(FieldLabel, { key: '0d9e70c1591f309ad2875d9e9fe6dbb8aa910323', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: '95e9b53fa73c452491f65355915bf04912900ded', class: "mrd-number-field__input-wrapper" }, h("input", { key: '1d341c270a21b1a10c51757e90257e48e741abd7', class: controlClass('mrd-number-field', hasError), type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), h(FieldError, { key: '0dba75e0f7355b71bfa71dab16cd1a6fcc36922f', base: "mrd-number-field", error: this.error }))));
+        return (h(Host, { key: '5df5c2e16c85cd54944d95b7a8c340ae1a4ddb34' }, h("div", { key: 'e332bd0190d537c002b14090fa96ec6502e34746', class: "mrd-number-field" }, h(FieldLabel, { key: 'e26ae85ef6c6d7935b2d34041a7ee2294da392a4', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: 'fb1a44a363a36b69124a0092e80b67d41b538c03', class: "mrd-number-field__input-wrapper" }, h("input", { key: '175c448177bbd46015fc7f47b98b76e16ee3b743', class: controlClass('mrd-number-field', hasError), type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), h(FieldError, { key: 'ecb16ddf655e563f0569e774ab2f2e419f60b0f1', base: "mrd-number-field", error: this.error }))));
     }
     static get is() { return "mrd-number-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,9 +21,9 @@ export class MrdSecretField {
         };
     }
     render() {
-        return (h(Host, { key: '9883a87b7fcc840aa4bbe0a3cde163cc58bda65d' }, h("div", { key: '3c7ec45d59a1a17863daa39b7c115db5c58815ee', class: "mrd-secret-field" }, h(FieldLabel, { key: '2dda66c7e6d4946661bff5a5a46589a7e17f569a', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
+        return (h(Host, { key: 'e06d04fdae34b42441976e21605fe94ad935382e' }, h("div", { key: '2889e1eb1b6d0887ae531523a0b9b43c49ef6f99', class: "mrd-secret-field" }, h(FieldLabel, { key: 'c40907905292cdef8bb0b8b9b0c03e05650bef37', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
             ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
-            : (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: 'ad8f54a7c76c59591fee77e11a12bbd62c392d91', base: "mrd-secret-field", error: this.error }))));
+            : (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: '6353e4b40566852dbc1994c7c9c409d0d0aa1b37', base: "mrd-secret-field", error: this.error }))));
     }
     static get is() { return "mrd-secret-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class MrdTextField {
         };
     }
     render() {
-        return (h(Host, { key: 'd2a6fb5735a3a01887cc467274a0ff9d71312124' }, h("div", { key: '7864bf852d43f93ebd0120a3ec1b72e54837d1ba', class: "mrd-text-field" }, h(FieldLabel, { key: 'bdad112197b44a643a58dd79c4648e284311199d', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: '1d3e1cf3374ea2e5a83794b5110205964fff86e1', class: controlClass('mrd-text-field', !!this.error), type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'bb4ec51de7b6d360fdb3d46dd53e85a5d497bcce', base: "mrd-text-field", error: this.error }))));
+        return (h(Host, { key: '3153f0c6f8ab4d9dae93306f7507399aeda75eaf' }, h("div", { key: '5d9c28023fdfb5472fc115c66bc3df509506e10f', class: "mrd-text-field" }, h(FieldLabel, { key: '1e21139aae0cc1ae95aa3297271b618a40043e77', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: '46f98d5e39bb834075449fac7096b077a1ae7bb3', class: controlClass('mrd-text-field', !!this.error), type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '10b6ddae9cd9f36dc9d7176167d79df8e4102c03', base: "mrd-text-field", error: this.error }))));
     }
     static get is() { return "mrd-text-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -64,7 +64,7 @@ export class MrdTextareaField {
         return DOMPurify.sanitize(html);
     }
     render() {
-        return (h(Host, { key: '708c1f8f14d2de4b5a274155d190fc19a304d7f0' }, h("div", { key: 'cf5c7a571e74cad08e0e320e91db4e22a3b2e080', class: "mrd-textarea-field" }, h(FieldLabel, { key: '4ced05f3914440f89dc5605901fc311e8ad54360', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '81147829bc575d05f3521bf3704edfdfe0d9b2cf', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: 'a9f42d86cab460d5e0cf6de87e0c0a0a1ca7d77a', class: "mrd-textarea-field__editor" })), h(FieldError, { key: '9f4b5271d0901e474ef6c0f1170b3ef718a844a9', base: "mrd-textarea-field", error: this.error }))));
+        return (h(Host, { key: 'e132531881f68f373e700617aac8033c8ebccb47' }, h("div", { key: 'fec0cf56cd7868d3fcd5a4e8a382b2dcdb6e5c50', class: "mrd-textarea-field" }, h(FieldLabel, { key: '333aa2ff57cce9e3178f0c4be4a1df1077884248', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '40025207580eb5768981b85aaa0a8ff95fce7234', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '621987b3b2b1d8b4836bff065075ba527a82db81', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'ac2d8de22f008cd1c91842137ccd0cd36eb9ce19', base: "mrd-textarea-field", error: this.error }))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }