@mmlogic/components 0.1.9 → 0.1.11

package/dist/cjs/mrd-boolean-field_16.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-BPj2cBXs.js');
+var format = require('./format-DBr-GTvS.js');
 var index$1 = require('./index.cjs.js');
-var format = require('./format-CDw-zie_.js');
 
 const mrdBooleanFieldScss = () => `.sc-mrd-boolean-field-h{display:block}.mrd-boolean-field.sc-mrd-boolean-field{display:flex;align-items:center;width:100%}.mrd-boolean-field__toggle-label.sc-mrd-boolean-field{display:flex;align-items:center;gap:var(--mrd-space-3);cursor:pointer;user-select:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field{background-color:var(--mrd-color-primary)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:checked+.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{transform:translateX(20px)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:focus+.mrd-boolean-field__toggle.sc-mrd-boolean-field{box-shadow:var(--mrd-shadow-focus)}.mrd-boolean-field__checkbox.sc-mrd-boolean-field:disabled+.mrd-boolean-field__toggle.sc-mrd-boolean-field{opacity:0.5;cursor:not-allowed}.mrd-boolean-field__toggle.sc-mrd-boolean-field{position:relative;display:inline-block;width:44px;height:24px;background-color:var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius-full);transition:background-color var(--mrd-transition);flex-shrink:0}.mrd-boolean-field__toggle.sc-mrd-boolean-field::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:var(--mrd-color-white);border-radius:50%;transition:transform var(--mrd-transition);box-shadow:var(--mrd-shadow-sm)}.mrd-boolean-field__text.sc-mrd-boolean-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-boolean-field__text--required.sc-mrd-boolean-field::after{content:' *';color:var(--mrd-color-danger)}`;
 
@@ -35,87 +35,6 @@ const MrdBooleanField = class {
 };
 MrdBooleanField.style = mrdBooleanFieldScss();
 
-const translations = {
-    nl: {
-        required: 'Dit veld is verplicht',
-        select_placeholder: 'Selecteer een optie',
-        search_placeholder: 'Zoeken...',
-        upload_file: 'Bestand uploaden',
-        choose_file: 'Bestand kiezen',
-        clear: 'Wissen',
-        today: 'Vandaag',
-        invalid_email: 'Voer een geldig e-mailadres in',
-        invalid_url: 'Voer een geldige URL in',
-        invalid_number: 'Voer een geldig getal in',
-        drop_file_here: 'Sleep bestand hierheen of',
-        browse: 'bladeren',
-        file_too_large: 'Bestand is te groot',
-        search_results: 'Zoekresultaten',
-        no_results: 'Geen resultaten gevonden',
-        loading: 'Laden...',
-        submit: 'Opslaan',
-        cancel: 'Annuleren',
-        remove: 'Verwijderen',
-        add: 'Toevoegen',
-        yes: 'Ja',
-        no: 'Nee',
-    },
-    en: {
-        required: 'This field is required',
-        select_placeholder: 'Select an option',
-        search_placeholder: 'Search...',
-        upload_file: 'Upload file',
-        choose_file: 'Choose file',
-        clear: 'Clear',
-        today: 'Today',
-        invalid_email: 'Please enter a valid email address',
-        invalid_url: 'Please enter a valid URL',
-        invalid_number: 'Please enter a valid number',
-        drop_file_here: 'Drop file here or',
-        browse: 'browse',
-        file_too_large: 'File is too large',
-        search_results: 'Search results',
-        no_results: 'No results found',
-        loading: 'Loading...',
-        submit: 'Save',
-        cancel: 'Cancel',
-        remove: 'Remove',
-        add: 'Add',
-        yes: 'Yes',
-        no: 'No',
-    },
-    ar: {
-        required: 'هذا الحقل مطلوب',
-        select_placeholder: 'اختر خياراً',
-        search_placeholder: 'بحث...',
-        upload_file: 'رفع ملف',
-        choose_file: 'اختر ملفاً',
-        clear: 'مسح',
-        today: 'اليوم',
-        invalid_email: 'يرجى إدخال عنوان بريد إلكتروني صحيح',
-        invalid_url: 'يرجى إدخال رابط صحيح',
-        invalid_number: 'يرجى إدخال رقم صحيح',
-        drop_file_here: 'اسحب الملف هنا أو',
-        browse: 'تصفح',
-        file_too_large: 'الملف كبير جداً',
-        search_results: 'نتائج البحث',
-        no_results: 'لم يتم العثور على نتائج',
-        loading: 'جار التحميل...',
-        submit: 'حفظ',
-        cancel: 'إلغاء',
-        remove: 'إزالة',
-        add: 'إضافة',
-        yes: 'نعم',
-        no: 'لا',
-    },
-};
-function t(key, locale) {
-    var _a, _b, _c;
-    const lang = locale.split('-')[0].toLowerCase();
-    const dict = (_a = translations[lang]) !== null && _a !== void 0 ? _a : translations['en'];
-    return (_c = (_b = dict[key]) !== null && _b !== void 0 ? _b : translations['en'][key]) !== null && _c !== void 0 ? _c : key;
-}
-
 function validateRequired(value) {
     if (value === null || value === undefined)
         return false;
@@ -190,7 +109,7 @@ const MrdCurrencyField = class {
             const raw = e.target.value;
             const parsed = format.parseLocalizedNumber(raw, this.locale);
             if (this.required && !validateRequired(raw)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';
@@ -235,7 +154,7 @@ const MrdDateField = class {
         this.handleChange = (e) => {
             const val = e.target.value;
             if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';
@@ -271,7 +190,7 @@ const MrdDatetimeField = class {
         this.handleChange = (e) => {
             const val = e.target.value;
             if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';
@@ -312,10 +231,10 @@ const MrdEmailField = class {
         this.handleBlur = (e) => {
             const val = e.target.value;
             if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else if (val && !validateEmail(val)) {
-                this.error = t('invalid_email', this.locale);
+                this.error = format.t('invalid_email', this.locale);
             }
             else {
                 this.error = '';
@@ -337,6 +256,7 @@ const MrdField = class {
         this.mrdBlur = index.createEvent(this, "mrdBlur");
         this.mrdSearch = index.createEvent(this, "mrdSearch");
         this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
+        this.mrdUpload = index.createEvent(this, "mrdUpload");
         this.locale = navigator.language;
         this.handleChange = (e) => {
             e.stopPropagation();
@@ -354,6 +274,10 @@ const MrdField = class {
             e.stopPropagation();
             this.mrdFetchAll.emit(e.detail);
         };
+        this.handleUpload = (e) => {
+            e.stopPropagation();
+            this.mrdUpload.emit(e.detail);
+        };
     }
     render() {
         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;
@@ -401,24 +325,26 @@ const MrdField = class {
             case index$1.ClientLayoutItemFieldDataType.LIST:
                 return (index.h(index.Host, null, index.h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = field.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = field.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
             case index$1.ClientLayoutItemFieldDataType.FILE:
-                return (index.h(index.Host, null, index.h("mrd-file-field", Object.assign({}, commonProps, { accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0 }))));
+                return (index.h(index.Host, null, index.h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
             case index$1.ClientLayoutItemFieldDataType.IMAGE:
-                return (index.h(index.Host, null, index.h("mrd-image-field", Object.assign({}, commonProps, { accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0 }))));
+                return (index.h(index.Host, null, index.h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0, onMrdUpload: this.handleUpload }))));
             default:
                 return index.h(index.Host, null);
         }
     }
 };
 
-const mrdFileFieldScss = () => `.sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
+const mrdFileFieldScss = () => `.sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__spinner.sc-mrd-file-field{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.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
 
 const MrdFileField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mrdChange = index.createEvent(this, "mrdChange");
         this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.mrdUpload = index.createEvent(this, "mrdUpload");
         this.name = '';
         this.label = '';
+        this.value = null;
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
@@ -426,6 +352,7 @@ const MrdFileField = class {
         this.maxSize = 0; // bytes, 0 = no limit
         this.fileName = '';
         this.isDragging = false;
+        this.uploading = false;
         this.error = '';
         this.handleInputChange = (e) => {
             var _a;
@@ -448,7 +375,7 @@ const MrdFileField = class {
         };
         this.handleZoneClick = () => {
             var _a;
-            if (!this.disabled) {
+            if (!this.disabled && !this.uploading) {
                 (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
             }
         };
@@ -456,29 +383,55 @@ const MrdFileField = class {
             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;
         }
         if (this.maxSize > 0 && file.size > this.maxSize) {
-            this.error = t('file_too_large', this.locale);
+            this.error = format.t('file_too_large', this.locale);
             return;
         }
         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 (index.h(index.Host, { key: '6617c70edaf193c204a951ff8116d54742592f84' }, index.h("div", { key: '69a45446da411c1cfdadd9ee7051e3ceea95a2d2', class: "mrd-file-field" }, this.label && (index.h("label", { key: 'ca415565514c5a3829b1e4a446493916bd1b5b17', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), index.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 }, index.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 ? (index.h("div", { class: "mrd-file-field__selected" }, index.h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), index.h("polyline", { points: "14 2 14 8 20 8" })), index.h("span", { class: "mrd-file-field__filename" }, this.fileName), index.h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715"))) : (index.h("div", { class: "mrd-file-field__prompt" }, index.h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { points: "16 16 12 12 8 16" }), index.h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), index.h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && index.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 (index.h(index.Host, { key: '2090102df8169226c1e66f87cbc837296e4b55d4' }, index.h("div", { key: '7a37a09df1bfa2eaf28ed04c806ad5f7c0337bb0', class: "mrd-file-field" }, this.label && (index.h("label", { key: '8f1fcb8adbb66b792be902c7c548e50db99b6a53', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), index.h("div", { key: '66d992298f537b24d69ce3ead3dd229f6d124f3d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.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 ? (index.h("div", { class: "mrd-file-field__selected" }, this.uploading ? (index.h("span", { class: "mrd-file-field__spinner", "aria-label": format.t('loading', this.locale) })) : (index.h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), index.h("polyline", { points: "14 2 14 8 20 8" }))), index.h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (index.h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": format.t('clear', this.locale) }, "\u2715")))) : (index.h("div", { class: "mrd-file-field__prompt" }, index.h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { points: "16 16 12 12 8 16" }), index.h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), index.h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), index.h("span", null, format.t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-file-field__browse" }, format.t('browse', this.locale)))))), hasError && index.h("span", { key: 'a6020e63bebb01e31a980a903f81badd486585aa', class: "mrd-file-field__error" }, this.error))));
     }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
 MrdFileField.style = mrdFileFieldScss();
 
@@ -491,6 +444,7 @@ const MrdForm = class {
         this.mrdCancel = index.createEvent(this, "mrdCancel");
         this.mrdSearch = index.createEvent(this, "mrdSearch");
         this.mrdFetchAll = index.createEvent(this, "mrdFetchAll");
+        this.mrdUpload = index.createEvent(this, "mrdUpload");
         this.locale = navigator.language;
         this.values = {};
         /**
@@ -554,6 +508,10 @@ const MrdForm = class {
             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;
@@ -698,7 +656,7 @@ const MrdForm = class {
             if (!def)
                 continue;
             if (def.required && !validateRequired(this.formValues[def.name])) {
-                newErrors[def.name] = t('required', this.locale);
+                newErrors[def.name] = format.t('required', this.locale);
             }
         }
         this.errors = newErrors;
@@ -717,6 +675,9 @@ const MrdForm = class {
             if (item.type === index$1.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;
@@ -746,7 +707,7 @@ const MrdForm = class {
             }
             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 (index.h("div", { class: "mrd-form__field" }, index.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] && (index.h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
+            return (index.h("div", { class: "mrd-form__field" }, index.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] && (index.h("span", { class: "mrd-form__field-error" }, this.errors[fieldName]))));
         });
     }
     render() {
@@ -754,7 +715,7 @@ const MrdForm = class {
             return index.h(index.Host, null);
         }
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
-        return (index.h(index.Host, null, index.h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && index.h("h2", { class: "mrd-form__title" }, this.layout.title), index.h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), index.h("div", { class: "mrd-form__footer" }, index.h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (index.h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
+        return (index.h(index.Host, null, index.h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && index.h("h2", { class: "mrd-form__title" }, this.layout.title), index.h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), index.h("div", { class: "mrd-form__footer" }, index.h("button", { type: "submit", class: "mrd-form__submit" }, format.t('submit', this.locale)), this.showCancel && (index.h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, format.t('cancel', this.locale)))))));
     }
     static get watchers() { return {
         "values": [{
@@ -786,10 +747,10 @@ const MrdHyperlinkField = class {
         this.handleBlur = (e) => {
             const val = e.target.value;
             if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else if (val && !validateUrl(val)) {
-                this.error = t('invalid_url', this.locale);
+                this.error = format.t('invalid_url', this.locale);
             }
             else {
                 this.error = '';
@@ -804,15 +765,17 @@ const MrdHyperlinkField = class {
 };
 MrdHyperlinkField.style = mrdHyperlinkFieldScss();
 
-const mrdImageFieldScss = () => `.sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__overlay.sc-mrd-image-field{display:none}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
+const mrdImageFieldScss = () => `.sc-mrd-image-field-h{display:block}.mrd-image-field.sc-mrd-image-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-image-field__label.sc-mrd-image-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-image-field__label--required.sc-mrd-image-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-image-field__zone.sc-mrd-image-field{display:flex;align-items:center;justify-content:center;border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-image-field__zone.sc-mrd-image-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--dragging.sc-mrd-image-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-image-field__zone--error.sc-mrd-image-field{border-color:var(--mrd-border-color-error)}.mrd-image-field__zone--disabled.sc-mrd-image-field{opacity:0.6;cursor:not-allowed}.mrd-image-field__zone--disabled.sc-mrd-image-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-image-field__input.sc-mrd-image-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;pointer-events:none}.mrd-image-field__prompt.sc-mrd-image-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-6);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-image-field__upload-icon.sc-mrd-image-field{width:40px;height:40px;color:var(--mrd-color-neutral-400)}.mrd-image-field__browse.sc-mrd-image-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-image-field__preview-container.sc-mrd-image-field{display:flex;align-items:center;gap:var(--mrd-space-4);padding:var(--mrd-space-4);width:100%}.mrd-image-field__preview-thumb.sc-mrd-image-field{flex-shrink:0;width:80px;height:80px;border-radius:var(--mrd-border-radius);overflow:hidden;border:var(--mrd-border-width) solid var(--mrd-border-color);background-color:var(--mrd-color-neutral-100)}.mrd-image-field__preview.sc-mrd-image-field{width:100%;height:100%;object-fit:cover;display:block}.mrd-image-field__preview-info.sc-mrd-image-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-image-field__preview-name.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrd-image-field__preview-overlay.sc-mrd-image-field{position:absolute;inset:0;background:rgb(255 255 255 / 0.7);display:flex;align-items:center;justify-content:center;border-radius:var(--mrd-border-radius)}.mrd-image-field__spinner.sc-mrd-image-field{display:inline-block;width:24px;height:24px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-image-spin 0.6s linear infinite}@keyframes mrd-image-spin{to{transform:rotate(360deg)}}.mrd-image-field__upload-status.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500)}.mrd-image-field__clear.sc-mrd-image-field{flex-shrink:0;background-color:var(--mrd-color-white);color:var(--mrd-color-danger);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-1) var(--mrd-space-3);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-image-field__clear.sc-mrd-image-field:hover{background-color:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-image-field__error.sc-mrd-image-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
 
 const MrdImageField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mrdChange = index.createEvent(this, "mrdChange");
         this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.mrdUpload = index.createEvent(this, "mrdUpload");
         this.name = '';
         this.label = '';
+        this.value = null;
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
@@ -821,6 +784,7 @@ const MrdImageField = class {
         this.previewUrl = '';
         this.fileName = '';
         this.isDragging = false;
+        this.uploading = false;
         this.error = '';
         this.handleInputChange = (e) => {
             var _a;
@@ -843,7 +807,7 @@ const MrdImageField = class {
         };
         this.handleZoneClick = () => {
             var _a;
-            if (!this.disabled) {
+            if (!this.disabled && !this.uploading) {
                 (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
             }
         };
@@ -852,20 +816,33 @@ const MrdImageField = class {
             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;
         }
         if (this.maxSize > 0 && file.size > this.maxSize) {
-            this.error = t('file_too_large', this.locale);
+            this.error = format.t('file_too_large', this.locale);
             return;
         }
         if (!file.type.startsWith('image/')) {
@@ -874,6 +851,8 @@ const MrdImageField = class {
         }
         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;
@@ -881,11 +860,23 @@ const MrdImageField = class {
         };
         reader.readAsDataURL(file);
         this.mrdChange.emit({ name: this.name, value: file });
+        this.mrdUpload.emit({ name: this.name, file });
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: 'c188d49744b7044d46b6c6f42126032f1ecc8a8f' }, index.h("div", { key: '53990650a5109172addca5ae274b180569b08860', class: "mrd-image-field" }, this.label && (index.h("label", { key: '3dc78faca422fcafed31833a11307cace9f2ff13', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), index.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 }, index.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 ? (index.h("div", { class: "mrd-image-field__preview-container" }, index.h("div", { class: "mrd-image-field__preview-thumb" }, index.h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName })), index.h("div", { class: "mrd-image-field__preview-info" }, index.h("span", { class: "mrd-image-field__preview-name" }, this.fileName)), index.h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale)))) : (index.h("div", { class: "mrd-image-field__prompt" }, index.h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), index.h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), index.h("polyline", { points: "21 15 16 10 5 21" })), index.h("span", null, t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && index.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 (index.h(index.Host, { key: '76b5a36a7f5a420ded3400c8a1481843363d1cbe' }, index.h("div", { key: '3544df84aaf427a25518bafe13d60cf89ed28537', class: "mrd-image-field" }, this.label && (index.h("label", { key: 'dca64c1600cb98526eb4b91a908106087f099ad1', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'ce07f32126f0956e47ff6fc41ff231590e0503d3', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.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 ? (index.h("div", { class: "mrd-image-field__preview-container" }, index.h("div", { class: "mrd-image-field__preview-thumb" }, index.h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && index.h("div", { class: "mrd-image-field__preview-overlay" }, index.h("span", { class: "mrd-image-field__spinner" }))), index.h("div", { class: "mrd-image-field__preview-info" }, index.h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (index.h("span", { class: "mrd-image-field__upload-status" }, format.t('loading', this.locale)))), !this.uploading && (index.h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": format.t('clear', this.locale) }, format.t('remove', this.locale))))) : (index.h("div", { class: "mrd-image-field__prompt" }, index.h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), index.h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), index.h("polyline", { points: "21 15 16 10 5 21" })), index.h("span", null, format.t('drop_file_here', this.locale), ' ', index.h("span", { class: "mrd-image-field__browse" }, format.t('browse', this.locale)))))), hasError && index.h("span", { key: '9b8f9563fea63bd12c38f5c480e9cbd24106c3af', class: "mrd-image-field__error" }, this.error))));
     }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
 MrdImageField.style = mrdImageFieldScss();
 
@@ -913,7 +904,7 @@ const MrdListField = class {
                 const vals = Array.from(select.selectedOptions).map(o => o.value);
                 this.selected = vals;
                 if (this.required && !validateRequired(vals)) {
-                    this.error = t('required', this.locale);
+                    this.error = format.t('required', this.locale);
                 }
                 else {
                     this.error = '';
@@ -923,7 +914,7 @@ const MrdListField = class {
             else {
                 const val = select.value;
                 if (this.required && !validateRequired(val)) {
-                    this.error = t('required', this.locale);
+                    this.error = format.t('required', this.locale);
                 }
                 else {
                     this.error = '';
@@ -943,7 +934,7 @@ const MrdListField = class {
                 this.selected = [...this.selected, key];
             }
             if (this.required && !validateRequired(this.selected)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';
@@ -976,7 +967,7 @@ const MrdListField = class {
                 return (index.h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, index.h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (index.h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : '' } })), index.h("span", null, lv.label)));
             })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
         }
-        return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
+        return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, index.h("option", { value: "" }, format.t('select_placeholder', this.locale)), this.listItems.map(lv => {
             var _a, _b;
             const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
             const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
@@ -1011,10 +1002,10 @@ const MrdNumberField = class {
             const raw = e.target.value;
             const parsed = format.parseLocalizedNumber(raw, this.locale);
             if (this.required && (parsed === null || raw === '')) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else if (raw !== '' && !validateNumber(parsed, this.dataType)) {
-                this.error = t('invalid_number', this.locale);
+                this.error = format.t('invalid_number', this.locale);
             }
             else {
                 this.error = '';
@@ -1164,7 +1155,7 @@ const MrdRelationField = class {
                 this.mrdChange.emit({ name: this.name, value: result.id });
             }
             if (this.required && !validateRequired(this.selectedItems)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';
@@ -1178,7 +1169,7 @@ const MrdRelationField = class {
         this.handleDropdownChange = (e) => {
             const val = e.target.value;
             if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';
@@ -1242,19 +1233,19 @@ const MrdRelationField = class {
         const hasError = !!this.error;
         if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN) {
             const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
-            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (index.h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, format.t('select_placeholder', this.locale)), this.allRecords.map(record => (index.h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
         if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
             const currentValue = Array.isArray(this.value) ? ((_c = this.value[0]) !== null && _c !== void 0 ? _c : '') : ((_d = this.value) !== null && _d !== void 0 ? _d : '');
-            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (index.h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, format.t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (index.h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
         // SEARCH mode
         const labelEl = this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
         // Single selection: show selected value as a badge, hide the search input
         if (!this.multiple && this.selectedItems.length > 0) {
-            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, index.h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, index.h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), index.h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": t('remove', this.locale) }, "\u2715")), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, index.h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, index.h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), index.h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": format.t('remove', this.locale) }, "\u2715")), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
-        return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (index.h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (index.h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, index.h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": t('remove', this.locale) }, "\u2715")))))), index.h("div", { class: "mrd-relation-field__search-wrapper" }, index.h("input", { class: `mrd-relation-field__search${hasError ? ' mrd-relation-field__search--error' : ''}`, type: "text", value: this.searchQuery, placeholder: t('search_placeholder', this.locale), disabled: this.disabled, onInput: this.handleSearchInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }), this.isLoading && (index.h("span", { class: "mrd-relation-field__spinner", "aria-label": t('loading', this.locale) }))), this.showResults && (index.h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (index.h("div", { class: "mrd-relation-field__no-results" }, t('no_results', this.locale))) : (this.searchResults.map((result, i) => (index.h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, index.h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (index.h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+        return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (index.h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (index.h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, index.h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": format.t('remove', this.locale) }, "\u2715")))))), index.h("div", { class: "mrd-relation-field__search-wrapper" }, index.h("input", { class: `mrd-relation-field__search${hasError ? ' mrd-relation-field__search--error' : ''}`, type: "text", value: this.searchQuery, placeholder: format.t('search_placeholder', this.locale), disabled: this.disabled, onInput: this.handleSearchInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }), this.isLoading && (index.h("span", { class: "mrd-relation-field__spinner", "aria-label": format.t('loading', this.locale) }))), this.showResults && (index.h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (index.h("div", { class: "mrd-relation-field__no-results" }, format.t('no_results', this.locale))) : (this.searchResults.map((result, i) => (index.h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, index.h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (index.h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
     }
 };
 MrdRelationField.style = mrdRelationFieldScss();
@@ -1281,7 +1272,7 @@ const MrdTextField = class {
         this.handleBlur = (e) => {
             const val = e.target.value;
             if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';
@@ -1350,7 +1341,7 @@ const MrdTextareaField = class {
                 if (!range) {
                     const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
                     if (this.required && !validateRequired(html)) {
-                        this.error = t('required', this.locale);
+                        this.error = format.t('required', this.locale);
                     }
                     else {
                         this.error = '';
@@ -1388,7 +1379,7 @@ const MrdTimeField = class {
         this.handleChange = (e) => {
             const val = e.target.value;
             if (this.required && !validateRequired(val)) {
-                this.error = t('required', this.locale);
+                this.error = format.t('required', this.locale);
             }
             else {
                 this.error = '';