@mmlogic/components 0.1.8 → 0.1.10

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

@@ -4,6 +4,7 @@ export class MrdFileField {
     constructor() {
         this.name = '';
         this.label = '';
+        this.value = null;
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
@@ -11,6 +12,7 @@ export class MrdFileField {
         this.maxSize = 0; // bytes, 0 = no limit
         this.fileName = '';
         this.isDragging = false;
+        this.uploading = false;
         this.error = '';
         this.handleInputChange = (e) => {
             var _a;
@@ -33,7 +35,7 @@ export class MrdFileField {
         };
         this.handleZoneClick = () => {
             var _a;
-            if (!this.disabled) {
+            if (!this.disabled && !this.uploading) {
                 (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
             }
         };
@@ -41,14 +43,26 @@ export class MrdFileField {
             e.stopPropagation();
             this.fileName = '';
             this.error = '';
+            this.uploading = false;
             if (this.fileInputRef)
                 this.fileInputRef.value = '';
             this.mrdChange.emit({ name: this.name, value: null });
         };
     }
+    /** 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.fileName = '';
+        }
+    }
     handleFile(file) {
         if (!file) {
             this.fileName = '';
+            this.uploading = false;
             this.mrdChange.emit({ name: this.name, value: null });
             return;
         }
@@ -58,11 +72,20 @@ export class MrdFileField {
         }
         this.error = '';
         this.fileName = file.name;
+        this.uploading = true;
         this.mrdChange.emit({ name: this.name, value: file });
+        this.mrdUpload.emit({ name: this.name, file });
     }
     render() {
+        const hasFile = this.uploading || (typeof this.value === 'string' && this.value) || this.fileName;
         const hasError = !!this.error;
-        return (h(Host, { key: '6617c70edaf193c204a951ff8116d54742592f84' }, h("div", { key: '69a45446da411c1cfdadd9ee7051e3ceea95a2d2', class: "mrd-file-field" }, this.label && (h("label", { key: 'ca415565514c5a3829b1e4a446493916bd1b5b17', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: 'abee0fc6a53c9f1266e6ed2d0ec8ab85a20a81ca', class: `mrd-file-field__zone${this.isDragging ? ' mrd-file-field__zone--dragging' : ''}${hasError ? ' mrd-file-field__zone--error' : ''}${this.disabled ? ' mrd-file-field__zone--disabled' : ''}`, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'c1dbca750d4115b7d8ea3dcd9ed3405ed11c93a2', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled, required: this.required && !this.fileName, onChange: this.handleInputChange }), this.fileName ? (h("div", { class: "mrd-file-field__selected" }, 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), 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)))))), hasError && h("span", { key: '91ef6a6240f139e161288cb812d17e13a619ec89', class: "mrd-file-field__error" }, this.error))));
+        const zoneClass = [
+            'mrd-file-field__zone',
+            this.isDragging ? 'mrd-file-field__zone--dragging' : '',
+            hasError ? 'mrd-file-field__zone--error' : '',
+            this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '95ba6560e71ee08c6b2526802727b29a18cdc454', 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)))))), hasError && h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
     }
     static get is() { return "mrd-file-field"; }
     static get encapsulation() { return "scoped"; }
@@ -118,6 +141,24 @@ export class MrdFileField {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "unknown",
+                    "resolved": "unknown",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -224,6 +265,7 @@ export class MrdFileField {
         return {
             "fileName": {},
             "isDragging": {},
+            "uploading": {},
             "error": {}
         };
     }
@@ -268,6 +310,32 @@ export class MrdFileField {
                         }
                     }
                 }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "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."
+                },
+                "complexType": {
+                    "original": "{ name: string; file: File }",
+                    "resolved": "{ name: string; file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
             }];
     }
 }

package/dist/collection/components/mrd-file-field/mrd-file-field.scss

@@ -133,6 +133,19 @@
   background-color: var(--mrd-color-danger-light);
 }
 
+.mrd-file-field__spinner {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--mrd-color-neutral-300);
+  border-top-color: var(--mrd-color-primary);
+  border-radius: 50%;
+  animation: mrd-file-spin 0.6s linear infinite;
+}
+
+@keyframes mrd-file-spin { to { transform: rotate(360deg); } }
+
 .mrd-file-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);

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

@@ -6,30 +6,56 @@ export class MrdForm {
     constructor() {
         this.locale = navigator.language;
         this.values = {};
+        /**
+         * Absolute href of the parent/reference object (e.g. the clientAgreement href
+         * when creating an invoice from within a client agreement).
+         * Combined with `referenceClass`, mrd-form will automatically pre-fill the
+         * matching relation field so dependent DROPDOWN fields can be fetched on load
+         * — without the host app needing to know anything about the form layout.
+         */
+        /**
+         * Absolute href of the parent/reference object (e.g. the clientAgreement href
+         * when creating an invoice from within a client agreement).
+         * Combined with `referenceClass`, mrd-form will automatically pre-fill the
+         * matching relation field so dependent DROPDOWN fields can be fetched on load.
+         */
+        this.referenceHref = '';
+        /**
+         * The `mostSignificantClass` of the parent/reference object
+         * (e.g. `'clientAgreements'`). Used to locate the matching RELATION field.
+         */
+        this.referenceClass = '';
+        /** When true, a cancel button is shown next to the submit button. */
+        this.showCancel = false;
         this.formValues = {};
         this.errors = {};
         this.submitted = false;
         this.handleFieldChange = (e) => {
             const { name, value } = e.detail;
+            const prevHref = this.getHref(this.formValues[name]);
             this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
             if (this.errors[name]) {
                 this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
             }
             // When a field changes, check if it is the commonRelation dependency for any
             // DROPDOWN relation. If so, reset the dependent field and re-fetch its options.
+            // Skip when the effective href did not change (e.g. mrdBlur fires after mrdChange
+            // with the same value, which would otherwise trigger a duplicate fetch).
+            const newHref = this.getHref(value);
+            if (newHref === prevHref)
+                return;
             for (const rel of this.collectDependentDropdowns()) {
                 if (rel.commonRelation !== name)
                     continue;
                 // Clear the dependent field's current selection (options have changed)
                 this.formValues = Object.assign(Object.assign({}, this.formValues), { [rel.name]: null });
-                const filterValue = this.getHref(value);
                 this.mrdFetchAll.emit({
                     name: rel.name,
                     relatedClass: rel.relatedClass,
                     mostSignificantClass: rel.mostSignificantClass,
                     commonRelation: rel.commonRelation,
                     filter: rel.commonRelation,
-                    filterValue, // empty string when dependency was cleared → host should clear the list
+                    filterValue: newHref, // empty string when dependency was cleared → host should clear the list
                 });
             }
         };
@@ -41,6 +67,10 @@ export class MrdForm {
             e.stopPropagation();
             this.mrdFetchAll.emit(e.detail);
         };
+        this.handleUpload = (e) => {
+            e.stopPropagation();
+            this.mrdUpload.emit(e.detail);
+        };
         this.handleSubmit = (e) => {
             e.preventDefault();
             this.submitted = true;
@@ -54,20 +84,71 @@ export class MrdForm {
         this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
     }
     componentDidLoad() {
-        // Emit mrdFetchAll for DROPDOWN fields with commonRelation whose dependency
-        // already has a value — this handles the edit-mode case where values are set
-        // as a prop before mount.
-        setTimeout(() => this.emitDependentFetchAll(), 0);
+        // Apply reference pre-fill and emit mrdFetchAll for dependent DROPDOWN fields.
+        // Deferred so Angular/host prop bindings are settled before we read them.
+        setTimeout(() => {
+            this.applyReferenceValue();
+            this.emitDependentFetchAll();
+        }, 0);
     }
     /** Sync formValues when the values prop is set from outside after mount
      *  (e.g. when pre-filling an existing record in edit mode). */
     valuesChanged(newValues) {
         this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
+        this.applyReferenceValue();
         this.errors = {};
         this.submitted = false;
         // Re-check DROPDOWN dependencies now that formValues are updated
         setTimeout(() => this.emitDependentFetchAll(), 0);
     }
+    /**
+     * When referenceHref + referenceClass are set, find the matching layout field
+     * and inject its value into formValues. This allows dependent DROPDOWN fields
+     * (those with commonRelation pointing to that field) to be fetched on load
+     * without the host app doing any form-domain logic.
+     *
+     * Two lookup strategies:
+     * 1. Find a RELATION whose mostSignificantClass matches referenceClass.
+     * 2. Fallback: find a DROPDOWN whose commonRelation field is absent from the
+     *    layout (API omitted it because it is implied by the reference context).
+     */
+    applyReferenceValue() {
+        if (!this.referenceHref || !this.referenceClass)
+            return;
+        const fieldName = this.resolveReferenceFieldName();
+        if (!fieldName)
+            return;
+        // Only set when not already present (don't overwrite an explicit value)
+        if (!this.formValues[fieldName]) {
+            this.formValues = Object.assign(Object.assign({}, this.formValues), { [fieldName]: this.referenceHref });
+        }
+    }
+    resolveReferenceFieldName() {
+        var _a, _b;
+        const allItems = this.collectFields((_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
+        // Strategy 1: direct match on mostSignificantClass
+        const direct = allItems.find(item => {
+            var _a;
+            return item.type === ClientLayoutItemType.RELATION &&
+                ((_a = item.relation) === null || _a === void 0 ? void 0 : _a.mostSignificantClass) === this.referenceClass;
+        });
+        if (direct === null || direct === void 0 ? void 0 : direct.relation)
+            return direct.relation.name;
+        // Strategy 2: a DROPDOWN whose commonRelation field was omitted from the layout
+        const layoutRelationNames = new Set(allItems
+            .filter(item => item.type === ClientLayoutItemType.RELATION)
+            .map(item => item.relation.name));
+        for (const item of allItems) {
+            const rel = item.relation;
+            if (item.type === ClientLayoutItemType.RELATION &&
+                (rel === null || rel === void 0 ? void 0 : rel.editBehavior) === ClientLayoutItemRelationEditBehavior.DROPDOWN &&
+                rel.commonRelation &&
+                !layoutRelationNames.has(rel.commonRelation)) {
+                return rel.commonRelation;
+            }
+        }
+        return null;
+    }
     async setFieldValue(name, value) {
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
         if (this.errors[name]) {
@@ -153,6 +234,9 @@ export class MrdForm {
             if (item.type === ClientLayoutItemType.FIELD && item.field) {
                 const name = item.field.name;
                 const value = this.formValues[name];
+                // Skip file/image fields that are still uploading (value is a File object)
+                if (value instanceof File)
+                    continue;
                 // Omit empty strings for optional fields
                 if (value !== '')
                     payload[name] = value !== null && value !== void 0 ? value : null;
@@ -182,7 +266,7 @@ export class MrdForm {
             }
             const fieldName = (_d = (_b = (_a = item.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = item.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
             const fieldValue = this.formValues[fieldName];
-            return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
+            return (h("div", { class: "mrd-form__field" }, h("mrd-field", { item: item, locale: this.locale, value: fieldValue, onMrdChange: this.handleFieldChange, onMrdBlur: this.handleFieldChange, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll, onMrdUpload: this.handleUpload }), this.errors[fieldName] && (h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
         });
     }
     render() {
@@ -190,7 +274,7 @@ export class MrdForm {
             return h(Host, null);
         }
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
-        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale))))));
+        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
     }
     static get is() { return "mrd-form"; }
     static get encapsulation() { return "scoped"; }
@@ -272,6 +356,66 @@ export class MrdForm {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "{}"
+            },
+            "referenceHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Absolute href of the parent/reference object (e.g. the clientAgreement href\nwhen creating an invoice from within a client agreement).\nCombined with `referenceClass`, mrd-form will automatically pre-fill the\nmatching relation field so dependent DROPDOWN fields can be fetched on load."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference-href",
+                "defaultValue": "''"
+            },
+            "referenceClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `mostSignificantClass` of the parent/reference object\n(e.g. `'clientAgreements'`). Used to locate the matching RELATION field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference-class",
+                "defaultValue": "''"
+            },
+            "showCancel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, a cancel button is shown next to the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-cancel",
+                "defaultValue": "false"
             }
         };
     }
@@ -303,6 +447,21 @@ export class MrdForm {
                         }
                     }
                 }
+            }, {
+                "method": "mrdCancel",
+                "name": "mrdCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "mrdSearch",
                 "name": "mrdSearch",
@@ -333,6 +492,26 @@ export class MrdForm {
                     "resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; file: File }",
+                    "resolved": "{ name: string; file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

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

@@ -83,6 +83,7 @@
   border-top: var(--mrd-border-width) solid var(--mrd-border-color);
   display: flex;
   justify-content: flex-end;
+  gap: var(--mrd-space-3);
 }
 
 .mrd-form__submit {
@@ -114,3 +115,34 @@
 .mrd-form__submit:active {
   background-color: var(--mrd-color-primary-dark);
 }
+
+.mrd-form__cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background-color: transparent;
+  color: var(--mrd-color-neutral-600);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition), color var(--mrd-transition);
+}
+
+.mrd-form__cancel:hover {
+  background-color: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-form__cancel:focus {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-form__cancel:active {
+  background-color: var(--mrd-color-neutral-200);
+}

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

@@ -4,6 +4,7 @@ export class MrdImageField {
     constructor() {
         this.name = '';
         this.label = '';
+        this.value = null;
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
@@ -12,6 +13,7 @@ export class MrdImageField {
         this.previewUrl = '';
         this.fileName = '';
         this.isDragging = false;
+        this.uploading = false;
         this.error = '';
         this.handleInputChange = (e) => {
             var _a;
@@ -34,7 +36,7 @@ export class MrdImageField {
         };
         this.handleZoneClick = () => {
             var _a;
-            if (!this.disabled) {
+            if (!this.disabled && !this.uploading) {
                 (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
             }
         };
@@ -43,15 +45,28 @@ export class MrdImageField {
             this.previewUrl = '';
             this.fileName = '';
             this.error = '';
+            this.uploading = false;
             if (this.fileInputRef)
                 this.fileInputRef.value = '';
             this.mrdChange.emit({ name: this.name, value: null });
         };
     }
+    /** 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 = '';
+        }
+    }
     handleFile(file) {
         if (!file) {
             this.previewUrl = '';
             this.fileName = '';
+            this.uploading = false;
             this.mrdChange.emit({ name: this.name, value: null });
             return;
         }
@@ -65,6 +80,8 @@ export class MrdImageField {
         }
         this.error = '';
         this.fileName = file.name;
+        this.uploading = true;
+        // Show local preview immediately while upload is in progress
         const reader = new FileReader();
         reader.onload = (ev) => {
             var _a;
@@ -72,10 +89,17 @@ export class MrdImageField {
         };
         reader.readAsDataURL(file);
         this.mrdChange.emit({ name: this.name, value: file });
+        this.mrdUpload.emit({ name: this.name, file });
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'c188d49744b7044d46b6c6f42126032f1ecc8a8f' }, h("div", { key: '53990650a5109172addca5ae274b180569b08860', class: "mrd-image-field" }, this.label && (h("label", { key: '3dc78faca422fcafed31833a11307cace9f2ff13', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: '4ca9eb1362c999721742ac3d727326078fe844c7', class: `mrd-image-field__zone${this.isDragging ? ' mrd-image-field__zone--dragging' : ''}${hasError ? ' mrd-image-field__zone--error' : ''}${this.disabled ? ' mrd-image-field__zone--disabled' : ''}`, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '9e3a237ffb69ce9f6fb20e6b3e603e4db453e7e9', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled, 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 })), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName)), 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)))))), hasError && h("span", { key: '85cf998e1ab26cce7fbf87836df25672971a4eb1', class: "mrd-image-field__error" }, this.error))));
+        const zoneClass = [
+            'mrd-image-field__zone',
+            this.isDragging ? 'mrd-image-field__zone--dragging' : '',
+            hasError ? 'mrd-image-field__zone--error' : '',
+            this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: '76b5a36a7f5a420ded3400c8a1481843363d1cbe' }, h("div", { key: '3544df84aaf427a25518bafe13d60cf89ed28537', class: "mrd-image-field" }, this.label && (h("label", { key: 'dca64c1600cb98526eb4b91a908106087f099ad1', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: 'ce07f32126f0956e47ff6fc41ff231590e0503d3', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '660fbae5f730834c465522a11dd674fc8e50a54e', 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)))))), hasError && h("span", { key: '9b8f9563fea63bd12c38f5c480e9cbd24106c3af', class: "mrd-image-field__error" }, this.error))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }
@@ -131,6 +155,24 @@ export class MrdImageField {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "unknown",
+                    "resolved": "unknown",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -238,6 +280,7 @@ export class MrdImageField {
             "previewUrl": {},
             "fileName": {},
             "isDragging": {},
+            "uploading": {},
             "error": {}
         };
     }
@@ -282,6 +325,32 @@ export class MrdImageField {
                         }
                     }
                 }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "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."
+                },
+                "complexType": {
+                    "original": "{ name: string; file: File }",
+                    "resolved": "{ name: string; file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
             }];
     }
 }