@mmlogic/components 0.5.1 → 0.5.3

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import DOMPurify from "dompurify";
 import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdTextareaField {
     constructor() {
@@ -40,14 +41,12 @@ export class MrdTextareaField {
                 quill.clipboard.dangerouslyPasteHTML(this.value);
             }
             quill.on('text-change', () => {
-                var _a, _b;
-                const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
+                const html = this.getSanitizedHtml();
                 this.mrdChange.emit({ name: this.name, value: html });
             });
             quill.on('selection-change', (range) => {
-                var _a, _b;
                 if (!range) {
-                    const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
+                    const html = this.getSanitizedHtml();
                     this.error = requiredError(html, this.required, this.locale);
                     this.mrdBlur.emit({ name: this.name, value: html });
                 }
@@ -59,8 +58,13 @@ export class MrdTextareaField {
             console.error('Failed to load Quill editor:', err);
         }
     }
+    getSanitizedHtml() {
+        var _a, _b;
+        const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
+        return DOMPurify.sanitize(html);
+    }
     render() {
-        return (h(Host, { key: 'de39890fc23146b880e69be7a8f04c91786ae9c9' }, h("div", { key: '0ccc855f3ee44553559a9ea8a70690466789f76d', class: "mrd-textarea-field" }, h(FieldLabel, { key: '2a16dcbeedbba8b5d8d1e8e8c0f021f14813f609', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '979ecb0ed163e3f753d75635452eea49d76edf29', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '8ea96a080086b68df55017a1464f6bce502f9a58', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'd6ac1a12f7be3594ed8cdb6d94b304c46dc8285b', 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"; }

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

@@ -20,7 +20,7 @@ export class MrdTimeField {
         };
     }
     render() {
-        return (h(Host, { key: '588e298c4f52aa4e65d87bfdc6918282ed97b3ae' }, h("div", { key: 'eed7332ca78747d4ff8b6c8d06ad4674e1c37e69', class: "mrd-time-field" }, h(FieldLabel, { key: '6383beb79fd05dabdc408256e3326f9637e4c993', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'b372d8b5dd523ee6182fe302450ce904ac17cc3c', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '7d8ce1e557bf583c0409e8f02893a15fadeab634', base: "mrd-time-field", error: this.error }))));
+        return (h(Host, { key: 'd521c654bc7beda71a31542a25198edaaf53b838' }, h("div", { key: '084ab16ac8aed952bd0ec50e0430591d4db5bd4b', class: "mrd-time-field" }, h(FieldLabel, { key: '43938ad7c5a9765353f6523d399d4b74cbb9ec6f', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'e46eda620e7a5f1bb3b433a4c051e913675c33f9', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '34bc1eaa1b969951dffaaacad73af532b6d290fb', base: "mrd-time-field", error: this.error }))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/mrd-field/mrd-field.js

@@ -111,7 +111,7 @@ export class MrdField {
         return (h("div", { class: "mrd-field__history-editor" }, this.historyEntries.length > 0 && (h("span", { class: "mrd-field__history-editor-label" }, t('history_badge_tooltip', locale))), this.historyEntries.map((entry, i) => (h("div", { key: String(i), class: "mrd-field__history-editor-row" }, h("input", { class: "mrd-field__history-editor-value", type: valueType, value: entry.value, onInput: (e) => updateEntry(i, 'value', e.target.value) }), h("span", { class: "mrd-field__history-editor-sep" }, t('history_until', locale)), h("input", { class: "mrd-field__history-editor-until", type: "date", value: entry.until, onInput: (e) => updateEntry(i, 'until', e.target.value) }), h("button", { type: "button", class: "mrd-field__history-editor-remove", onClick: () => removeEntry(i), "aria-label": t('remove', locale) }, h("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z", "clip-rule": "evenodd" })))))), h("button", { type: "button", class: "mrd-field__history-editor-add", onClick: addEntry }, "+ ", t('add', locale))));
     }
     renderLeafField(displayValue) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
         const { item, locale } = this;
         const commonProps = {
             name: item.name,
@@ -148,13 +148,13 @@ export class MrdField {
             case ClientLayoutItemFieldDataType.LIST:
                 return (h("mrd-list-field", Object.assign({}, commonProps, { value: (_u = displayValue) !== null && _u !== void 0 ? _u : '', multiple: (_v = item.multiple) !== null && _v !== void 0 ? _v : false, listItems: (_w = item.listItems) !== null && _w !== void 0 ? _w : [] })));
             case ClientLayoutItemFieldDataType.FILE:
-                return (h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_x = item.accept) !== null && _x !== void 0 ? _x : '', maxSize: (_y = item.maxSize) !== null && _y !== void 0 ? _y : 0, onMrdUpload: this.handleUpload })));
+                return (h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_x = item.accept) !== null && _x !== void 0 ? _x : '', maxSize: (_y = item.maxSize) !== null && _y !== void 0 ? _y : 0, multiple: (_z = item.multiple) !== null && _z !== void 0 ? _z : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.IMAGE:
-                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_z = item.accept) !== null && _z !== void 0 ? _z : 'image/*', maxSize: (_0 = item.maxSize) !== null && _0 !== void 0 ? _0 : 0, onMrdUpload: this.handleUpload })));
+                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_0 = item.accept) !== null && _0 !== void 0 ? _0 : 'image/*', maxSize: (_1 = item.maxSize) !== null && _1 !== void 0 ? _1 : 0, multiple: (_2 = item.multiple) !== null && _2 !== void 0 ? _2 : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.LONGTEXT:
-                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_1 = displayValue) !== null && _1 !== void 0 ? _1 : '', placeholder: (_2 = item.placeholder) !== null && _2 !== void 0 ? _2 : '' })));
+                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
             case ClientLayoutItemFieldDataType.SECRET:
-                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
+                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_5 = displayValue) !== null && _5 !== void 0 ? _5 : '', placeholder: (_6 = item.placeholder) !== null && _6 !== void 0 ? _6 : '' })));
             default:
                 return null;
         }

package/dist/collection/components/form/mrd-form/mrd-form.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../../types";
+import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../../types";
 import { t } from "../../../utils/i18n";
 import { validateRequired } from "../../../utils/validation";
 export class MrdForm {
@@ -199,7 +199,31 @@ export class MrdForm {
         }
         return null;
     }
-    async setFieldValue(name, value) {
+    /**
+     * Inject a value from outside (e.g. after a file upload completes).
+     * `file` is optional and only meaningful for `multiple` FILE/IMAGE fields: when
+     * the field's current value is an array, mrd-form replaces the array entry that
+     * `=== file` with `value`, leaving other pending/resolved entries untouched —
+     * this is how mrd-file-field/mrd-image-field resolve concurrent per-file uploads.
+     * Pass the `file` from the originating mrdUpload event back unchanged.
+     */
+    async setFieldValue(name, value, file) {
+        if (file) {
+            const current = this.formValues[name];
+            if (Array.isArray(current)) {
+                const index = current.indexOf(file);
+                if (index === -1)
+                    return; // the file was removed from the field before its upload resolved
+                const next = [...current];
+                next[index] = value;
+                this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: next });
+                if (this.errors[name])
+                    this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
+                return;
+            }
+            if (current !== file)
+                return; // stale resolution for a value that was since cleared/replaced
+        }
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
         if (this.errors[name]) {
             this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
@@ -269,6 +293,20 @@ export class MrdForm {
     normalizeFieldValue(value) {
         return (value === '' || value == null) ? null : value;
     }
+    /** FILE/IMAGE entries render as `{ href, fileName, contentType?, size? }` — the same
+     *  shape the API returns for an already-persisted file — or a bare href string for
+     *  freshly-resolved uploads. Only `href` is meaningful to the API, so unwrap before
+     *  submit (mirrors normalizeRelationValue). Do NOT fall back to any other key (e.g.
+     *  `id`) as a stand-in for `href` — a bare id is not a valid/complete reference on its
+     *  own; if `href` is ever missing that's an API bug to fix upstream, not to paper over here. */
+    normalizeFileFieldValue(value) {
+        const toHref = (v) => v && typeof v === 'object' && 'href' in v ? v.href : v;
+        if (Array.isArray(value)) {
+            const hrefs = value.map(toHref).filter(v => v != null && v !== '');
+            return hrefs.length ? hrefs : null;
+        }
+        return this.normalizeFieldValue(toHref(value));
+    }
     normalizeRelationValue(value) {
         if (value == null || value === '')
             return null;
@@ -315,8 +353,11 @@ export class MrdForm {
                 const rawValue = this.formValues[name];
                 if (rawValue instanceof File)
                     continue;
-                const current = this.normalizeFieldValue(rawValue);
-                const initial = this.normalizeFieldValue(this.initialValues[name]);
+                if (Array.isArray(rawValue) && rawValue.some(v => v instanceof File))
+                    continue;
+                const isFileField = item.dataType === ClientLayoutItemFieldDataType.FILE || item.dataType === ClientLayoutItemFieldDataType.IMAGE;
+                const current = isFileField ? this.normalizeFileFieldValue(rawValue) : this.normalizeFieldValue(rawValue);
+                const initial = isFileField ? this.normalizeFileFieldValue(this.initialValues[name]) : this.normalizeFieldValue(this.initialValues[name]);
                 if (this.deepEqual(current, initial))
                     continue;
                 payload[name] = current;
@@ -619,7 +660,7 @@ export class MrdForm {
         return {
             "setFieldValue": {
                 "complexType": {
-                    "signature": "(name: string, value: unknown) => Promise<void>",
+                    "signature": "(name: string, value: unknown, file?: File) => Promise<void>",
                     "parameters": [{
                             "name": "name",
                             "type": "string",
@@ -628,17 +669,25 @@ export class MrdForm {
                             "name": "value",
                             "type": "unknown",
                             "docs": ""
+                        }, {
+                            "name": "file",
+                            "type": "File | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Inject a value from outside (e.g. after a file upload completes).\n`file` is optional and only meaningful for `multiple` FILE/IMAGE fields: when\nthe field's current value is an array, mrd-form replaces the array entry that\n`=== file` with `value`, leaving other pending/resolved entries untouched \u2014\nthis is how mrd-file-field/mrd-image-field resolve concurrent per-file uploads.\nPass the `file` from the originating mrdUpload event back unchanged.",
                     "tags": []
                 }
             }