@mmlogic/components 0.5.4 → 0.5.5

package/dist/cjs/mrd-merge-view.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DVbdkYO3.js');
 var clientLayout = require('./client-layout-CqVuJumR.js');
-var cellRenderer = require('./cell-renderer-Coy-aD3k.js');
+var cellRenderer = require('./cell-renderer-Mx3pwONr.js');
 
 /**
  * Whether a layout item can appear in the merge diff at all. m-n relations
@@ -257,14 +257,14 @@ const MrdMergeView = class {
         var _a, _b;
         let stepContent;
         if (this.step === 'search') {
-            stepContent = (index.h(MergeSearchStep, { key: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+            stepContent = (index.h(MergeSearchStep, { key: 'b965c21176faf7844e58cb156958fa1305d07cdc', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
         }
         else {
             const diff = diffFields(this.fields, this.currentRecord, this.candidate);
             const bLabel = candidateLabel(this.candidate);
             stepContent = this.step === 'compare' ? (index.h(MergeCompareStep, { locale: this.locale, currentLabel: this.currentLabel, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, recordA: this.currentRecord, recordB: (_a = this.candidate) !== null && _a !== void 0 ? _a : {}, resolutions: this.resolutions, openHistoryKey: this.openHistoryKey, onResolve: this.handleResolve, onToggleHistory: this.handleToggleHistory, onChangeCandidate: this.handleChangeCandidate, onContinue: this.handleContinue })) : (index.h(MergeConfirmStep, { locale: this.locale, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, resolutions: this.resolutions, recordB: (_b = this.candidate) !== null && _b !== void 0 ? _b : {}, openHistoryKey: this.openHistoryKey, onToggleHistory: this.handleToggleHistory, onBack: this.handleBack, onConfirm: this.handleConfirm }));
         }
-        return (index.h(index.Host, { key: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, index.h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', class: "mrd-merge-view" }, stepContent)));
+        return (index.h(index.Host, { key: 'e9cffda6c5cff51f802b044f3d8e417df83b7846' }, index.h("div", { key: '26690ef2db7489cbf7994191ad19491a0fdd7002', class: "mrd-merge-view" }, stepContent)));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { parseLocalizedNumber } from "../../../utils/format";
+import { formatNumber, parseLocalizedNumber } from "../../../utils/format";
 import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 const COMMON_CURRENCIES = [
     'EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CNY', 'AUD', 'CAD',
@@ -17,13 +17,26 @@ export class MrdCurrencyField {
         this.amountDisplay = '';
         this.currency = 'EUR';
         this.error = '';
+        /** While focused the user owns the text; prop updates must not overwrite it. */
+        this.focused = false;
         this.handleAmountInput = (e) => {
             this.amountDisplay = e.target.value;
         };
+        this.handleAmountFocus = () => {
+            this.focused = true;
+            // Drop the grouping separators while editing, but keep the locale's decimal
+            // separator: String(1234.56) would be re-read as 123456 where '.' groups.
+            const parsed = parseLocalizedNumber(this.amountDisplay, this.locale);
+            if (parsed !== null) {
+                this.amountDisplay = formatNumber(parsed, this.locale, { useGrouping: false, maximumFractionDigits: 20 });
+            }
+        };
         this.handleAmountBlur = (e) => {
+            this.focused = false;
             const raw = e.target.value;
             const parsed = parseLocalizedNumber(raw, this.locale);
             this.error = requiredError(raw, this.required, this.locale);
+            this.amountDisplay = parsed !== null ? this.formatAmount(parsed) : '';
             const val = { amount: parsed, currency: this.currency };
             this.mrdChange.emit({ name: this.name, value: val });
             this.mrdBlur.emit({ name: this.name, value: val });
@@ -35,14 +48,43 @@ export class MrdCurrencyField {
         };
     }
     componentWillLoad() {
-        if (this.value) {
-            this.currency = this.value.currency || 'EUR';
-            this.amountDisplay = this.value.amount !== null ? String(this.value.amount) : '';
+        this.syncFromValue();
+    }
+    componentDidRender() {
+        // A rendered `selected` attribute is ignored once the select has an established
+        // value, so the currency is applied imperatively — same reason as the DROPDOWN
+        // preselect in mrd-relation-field. Without this an edit-mode record that loads
+        // after mount keeps showing EUR and would be saved back with the wrong currency.
+        if (this.selectEl && this.selectEl.value !== this.currency) {
+            this.selectEl.value = this.currency;
         }
     }
+    /** The record's own currency may sit outside the common list; never drop it. */
+    currencyOptions() {
+        return COMMON_CURRENCIES.includes(this.currency) ? COMMON_CURRENCIES : [this.currency, ...COMMON_CURRENCIES];
+    }
+    /** Edit mode loads the record after mount, so the incoming value must re-sync. */
+    valueChanged() {
+        if (!this.focused)
+            this.syncFromValue();
+    }
+    localeChanged() {
+        if (!this.focused)
+            this.syncFromValue();
+    }
+    syncFromValue() {
+        const value = this.value;
+        this.currency = (value === null || value === void 0 ? void 0 : value.currency) || 'EUR';
+        this.amountDisplay =
+            (value === null || value === void 0 ? void 0 : value.amount) !== null && (value === null || value === void 0 ? void 0 : value.amount) !== undefined ? this.formatAmount(value.amount) : '';
+    }
+    /** Display form: locale separators, always two decimals. The ISO code sits in the select. */
+    formatAmount(amount) {
+        return formatNumber(amount, this.locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'e1a76ab778820c0d781d5ec1549448716d368c1f' }, h("div", { key: '8298720abac7f689fe3e697c3c4410702e6a87f2', class: "mrd-currency-field" }, h(FieldLabel, { key: 'b23782aef9a866f1fb72e152cb91aeae00a975fa', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '51e5177f9be3c5a6bdf3a5c1187f9261fcc349cf', class: "mrd-currency-field__row" }, h("input", { key: 'c6bda6cc92f3a2a34861d44b6163d417e200a6e4', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '29231cfa142d26aa81594609f1bf7bd5168df073', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'bea9615466427631f08a6ac8a779ae77695d36e3', base: "mrd-currency-field", error: this.error }))));
+        return (h(Host, { key: '43ef1fe660c4eaef025203544916b077975b6aa3' }, h("div", { key: '00b8e79182c8e2a353d57ad5c341024caf00d4ea', class: "mrd-currency-field" }, h(FieldLabel, { key: '96835c311e0d490864c484b818f1dcc623f488b2', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '80317cfe562af00cc4cbf9aabf4bac2126cf6fe5', class: "mrd-currency-field__row" }, h("input", { key: '1983ef1e4d19e0fc529cf5e8be7d287fea36620a', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: this.formatAmount(0), required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onFocus: this.handleAmountFocus, onBlur: this.handleAmountBlur }), h("select", { key: 'b5fe3f03590bebaa564d76bc5fcb47c327eacece', class: "mrd-currency-field__currency", ref: el => (this.selectEl = el), disabled: this.disabled, onChange: this.handleCurrencyChange }, this.currencyOptions().map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: '1a128b26293170d4137f787622d4e89a23e62c0b', base: "mrd-currency-field", error: this.error }))));
     }
     static get is() { return "mrd-currency-field"; }
     static get encapsulation() { return "scoped"; }
@@ -239,4 +281,13 @@ export class MrdCurrencyField {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "locale",
+                "methodName": "localeChanged"
+            }];
+    }
 }

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

@@ -19,6 +19,10 @@
   content: " *";
   color: var(--mrd-color-danger);
 }
+.mrd-date-field__control {
+  position: relative;
+  display: block;
+}
 .mrd-date-field__input {
   display: block;
   width: 100%;
@@ -53,12 +57,59 @@
 .mrd-date-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
+.mrd-date-field__input {
+  padding-inline-end: calc(var(--mrd-input-padding-x) + 1.75rem);
+}
+.mrd-date-field__picker {
+  position: absolute;
+  inset-inline-end: var(--mrd-space-1);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.mrd-date-field__picker-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mrd-border-radius-sm);
+  background: transparent;
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--mrd-transition), background-color var(--mrd-transition);
+}
+.mrd-date-field__picker-button svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.mrd-date-field__picker-button:hover:not(:disabled) {
+  color: var(--mrd-color-primary);
+  background-color: var(--mrd-color-neutral-100);
+}
+.mrd-date-field__picker-button:focus-visible {
+  outline: 2px solid var(--mrd-border-color-focus);
+  outline-offset: 1px;
+}
+.mrd-date-field__picker-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.mrd-date-field__picker-native {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
 .mrd-date-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
-}
-
-.mrd-date-field__input {
-  cursor: pointer;
 }

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

@@ -1,26 +1,106 @@
 import { Host, h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { formatIsoDate, localeDatePattern, parseLocalizedDate } from "../../../utils/format";
 import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDateField {
     constructor() {
         this.name = '';
         this.label = '';
+        /** ISO date, 'YYYY-MM-DD'. */
         this.value = '';
+        /** Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj'). */
+        this.placeholder = '';
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
+        /** What the user sees: the value formatted for `locale`, or their raw typing. */
+        this.displayValue = '';
         this.error = '';
-        this.handleChange = (e) => {
-            const val = e.target.value;
-            this.error = requiredError(val, this.required, this.locale);
-            this.mrdChange.emit({ name: this.name, value: val });
+        /** While focused the user owns the text; prop updates must not overwrite it. */
+        this.focused = false;
+        this.handleFocus = () => {
+            this.focused = true;
+        };
+        this.handleInput = (e) => {
+            this.displayValue = e.target.value;
         };
         this.handleBlur = (e) => {
-            const val = e.target.value;
-            this.mrdBlur.emit({ name: this.name, value: val });
+            this.focused = false;
+            const value = this.commit(e.target.value);
+            this.mrdChange.emit({ name: this.name, value });
+            this.mrdBlur.emit({ name: this.name, value });
+        };
+        this.handleKeyDown = (e) => {
+            // Submitting with Enter never fires blur, so commit the typed text here too.
+            if (e.key !== 'Enter')
+                return;
+            const value = this.commit(e.target.value);
+            this.mrdChange.emit({ name: this.name, value });
+        };
+        this.openPicker = () => {
+            const native = this.nativeInput;
+            if (!native || this.disabled)
+                return;
+            // The blur commit that precedes this click re-renders asynchronously, so sync by hand first.
+            native.value = this.currentIso();
+            try {
+                native.showPicker();
+            }
+            catch (_a) {
+                // Browsers without showPicker(): focusing at least surfaces the platform control.
+                native.focus();
+            }
         };
+        this.handlePickerChange = (e) => {
+            const iso = e.target.value; // native inputs always yield 'YYYY-MM-DD'
+            this.displayValue = formatIsoDate(iso, this.locale);
+            this.error = requiredError(iso, this.required, this.locale);
+            this.mrdChange.emit({ name: this.name, value: iso });
+            this.mrdBlur.emit({ name: this.name, value: iso });
+        };
+    }
+    componentWillLoad() {
+        this.displayValue = formatIsoDate(this.value, this.locale);
+    }
+    valueChanged(newValue) {
+        if (!this.focused)
+            this.displayValue = formatIsoDate(newValue, this.locale);
+    }
+    localeChanged() {
+        if (!this.focused)
+            this.displayValue = formatIsoDate(this.value, this.locale);
+    }
+    patternPlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        return localeDatePattern(this.locale, {
+            day: t('date_token_day', this.locale),
+            month: t('date_token_month', this.locale),
+            year: t('date_token_year', this.locale),
+        });
+    }
+    /** Parse the typed text, reformat it, and emit the ISO value. */
+    commit(raw) {
+        const trimmed = raw.trim();
+        const iso = trimmed ? parseLocalizedDate(trimmed, this.locale) : '';
+        if (trimmed && iso === null) {
+            // Keep the raw text so the user can correct it instead of retyping.
+            this.error = t('invalid_date', this.locale);
+            this.displayValue = trimmed;
+        }
+        else {
+            this.error = requiredError(iso, this.required, this.locale);
+            this.displayValue = iso ? formatIsoDate(iso, this.locale) : '';
+        }
+        return iso !== null && iso !== void 0 ? iso : '';
+    }
+    /** The ISO value currently shown, so the picker opens on the right date. */
+    currentIso() {
+        var _a;
+        return (_a = (this.displayValue ? parseLocalizedDate(this.displayValue, this.locale) : '')) !== null && _a !== void 0 ? _a : '';
     }
     render() {
-        return (h(Host, { key: 'd83beef11c2b9402e251a50885b92e7a057f02ee' }, h("div", { key: '6a26e4969e9bde8c5c87771d7b8c7b4d6c1dd942', class: "mrd-date-field" }, h(FieldLabel, { key: 'a7bc1b1c56e933a51f6b1b1feb794a4678d9d334', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: '82e3855654f3b3c554f80d647e783234cca8dae1', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '294b3cdc1004725267aa8265366f5009ab324203', base: "mrd-date-field", error: this.error }))));
+        return (h(Host, { key: '06ba48bd538ee4c8de4e071285535451f783c259' }, h("div", { key: '73ea6ea23c85fe3325bb151afb755cc11a13cf58', class: "mrd-date-field" }, h(FieldLabel, { key: '527848cf72323aef176fc7d5bcd47dcf2f7e46f6', base: "mrd-date-field", label: this.label, required: this.required }), h("div", { key: '2ff7586f4e6298d1f9b9b131106044533de82c6d', class: "mrd-date-field__control" }, h("input", { key: '68fdf2f1f7961ca049ab6493494c8c0707e6a4af', class: controlClass('mrd-date-field', !!this.error), type: "text", name: this.name, value: this.displayValue, placeholder: this.patternPlaceholder(), autocomplete: "off", required: this.required, disabled: this.disabled, onFocus: this.handleFocus, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("span", { key: '9557b7a3f6780b8a05030ab8e7c941c44df9f4a5', class: "mrd-date-field__picker" }, h("button", { key: '586973e0440ed0b74e1fa0affae9e462257024c3', type: "button", class: "mrd-date-field__picker-button", title: t('open_calendar', this.locale), "aria-label": t('open_calendar', this.locale), disabled: this.disabled, onClick: this.openPicker }, h("svg", { key: '144319d3a50d0d38c75c59dd3321d4b9097322a6', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "aria-hidden": "true" }, h("rect", { key: 'aec01ca5c620bf3116705b7a28052eb3bc210cfd', x: "3", y: "4.5", width: "14", height: "12", rx: "2" }), h("path", { key: 'a0e13dd3a2005bfbee40f5a071b6760270d0d58d', d: "M3 8.5h14M7 2.5v3M13 2.5v3", "stroke-linecap": "round" }))), h("input", { key: 'be02df44f31a59a26ce166ab9a9eab9db2635d89', class: "mrd-date-field__picker-native", type: "date", ref: el => (this.nativeInput = el), value: this.currentIso(), disabled: this.disabled, tabIndex: -1, "aria-hidden": "true", onChange: this.handlePickerChange }))), h(FieldError, { key: '2f8b2072bee32170a35f98ec5c962018774c7e8c', base: "mrd-date-field", error: this.error }))));
     }
     static get is() { return "mrd-date-field"; }
     static get encapsulation() { return "scoped"; }
@@ -88,7 +168,7 @@ export class MrdDateField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "ISO date, 'YYYY-MM-DD'."
                 },
                 "getter": false,
                 "setter": false,
@@ -96,6 +176,26 @@ export class MrdDateField {
                 "attribute": "value",
                 "defaultValue": "''"
             },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -160,6 +260,7 @@ export class MrdDateField {
     }
     static get states() {
         return {
+            "displayValue": {},
             "error": {}
         };
     }
@@ -196,4 +297,13 @@ export class MrdDateField {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "locale",
+                "methodName": "localeChanged"
+            }];
+    }
 }

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

@@ -19,6 +19,10 @@
   content: " *";
   color: var(--mrd-color-danger);
 }
+.mrd-datetime-field__control {
+  position: relative;
+  display: block;
+}
 .mrd-datetime-field__input {
   display: block;
   width: 100%;
@@ -53,12 +57,59 @@
 .mrd-datetime-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
+.mrd-datetime-field__input {
+  padding-inline-end: calc(var(--mrd-input-padding-x) + 1.75rem);
+}
+.mrd-datetime-field__picker {
+  position: absolute;
+  inset-inline-end: var(--mrd-space-1);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.mrd-datetime-field__picker-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mrd-border-radius-sm);
+  background: transparent;
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--mrd-transition), background-color var(--mrd-transition);
+}
+.mrd-datetime-field__picker-button svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.mrd-datetime-field__picker-button:hover:not(:disabled) {
+  color: var(--mrd-color-primary);
+  background-color: var(--mrd-color-neutral-100);
+}
+.mrd-datetime-field__picker-button:focus-visible {
+  outline: 2px solid var(--mrd-border-color-focus);
+  outline-offset: 1px;
+}
+.mrd-datetime-field__picker-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.mrd-datetime-field__picker-native {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
 .mrd-datetime-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
-}
-
-.mrd-datetime-field__input {
-  cursor: pointer;
 }

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

@@ -1,33 +1,77 @@
 import { Host, h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { formatLocalDateTime, localeDatePattern, parseLocalizedDateTime } from "../../../utils/format";
 import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDatetimeField {
     constructor() {
         this.name = '';
         this.label = '';
+        /** UTC ISO string, e.g. '2026-07-06T12:30:00Z'. */
         this.value = '';
+        /** Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj uu:mm'). */
+        this.placeholder = '';
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
+        /** What the user sees: the value formatted for `locale`, or their raw typing. */
+        this.displayValue = '';
         this.error = '';
-        this.localValue = '';
-        this.handleChange = (e) => {
-            const localVal = e.target.value;
-            this.localValue = localVal;
-            this.error = requiredError(localVal, this.required, this.locale);
-            this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
+        /** While focused the user owns the text; prop updates must not overwrite it. */
+        this.focused = false;
+        this.handleFocus = () => {
+            this.focused = true;
+        };
+        this.handleInput = (e) => {
+            this.displayValue = e.target.value;
         };
         this.handleBlur = (e) => {
-            const localVal = e.target.value;
-            this.mrdBlur.emit({ name: this.name, value: this.localToUtc(localVal) });
+            this.focused = false;
+            const value = this.commit(e.target.value);
+            this.mrdChange.emit({ name: this.name, value });
+            this.mrdBlur.emit({ name: this.name, value });
+        };
+        this.handleKeyDown = (e) => {
+            // Submitting with Enter never fires blur, so commit the typed text here too.
+            if (e.key !== 'Enter')
+                return;
+            const value = this.commit(e.target.value);
+            this.mrdChange.emit({ name: this.name, value });
+        };
+        this.openPicker = () => {
+            const native = this.nativeInput;
+            if (!native || this.disabled)
+                return;
+            // The blur commit that precedes this click re-renders asynchronously, so sync by hand first.
+            native.value = this.currentLocal();
+            try {
+                native.showPicker();
+            }
+            catch (_a) {
+                // Browsers without showPicker(): focusing at least surfaces the platform control.
+                native.focus();
+            }
+        };
+        this.handlePickerChange = (e) => {
+            const local = e.target.value; // native inputs always yield 'YYYY-MM-DDTHH:mm'
+            this.displayValue = formatLocalDateTime(local, this.locale);
+            this.error = requiredError(local, this.required, this.locale);
+            const value = this.localToUtc(local);
+            this.mrdChange.emit({ name: this.name, value });
+            this.mrdBlur.emit({ name: this.name, value });
         };
     }
     componentWillLoad() {
-        this.localValue = this.utcToLocal(this.value);
+        this.displayValue = this.toDisplay(this.value);
     }
     valueChanged(newVal) {
-        this.localValue = this.utcToLocal(newVal);
+        if (!this.focused)
+            this.displayValue = this.toDisplay(newVal);
     }
-    // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone (for datetime-local input)
+    localeChanged() {
+        if (!this.focused)
+            this.displayValue = this.toDisplay(this.value);
+    }
+    // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone
     utcToLocal(utcStr) {
         if (!utcStr)
             return '';
@@ -46,8 +90,43 @@ export class MrdDatetimeField {
             return '';
         return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
     }
+    // UTC ISO string → locale-formatted text for the input
+    toDisplay(utcStr) {
+        return formatLocalDateTime(this.utcToLocal(utcStr), this.locale);
+    }
+    patternPlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        return localeDatePattern(this.locale, {
+            day: t('date_token_day', this.locale),
+            month: t('date_token_month', this.locale),
+            year: t('date_token_year', this.locale),
+            hour: t('time_token_hour', this.locale),
+            minute: t('time_token_minute', this.locale),
+        });
+    }
+    /** Parse the typed text, reformat it, and return the UTC value to emit. */
+    commit(raw) {
+        const trimmed = raw.trim();
+        const local = trimmed ? parseLocalizedDateTime(trimmed, this.locale) : '';
+        if (trimmed && local === null) {
+            // Keep the raw text so the user can correct it instead of retyping.
+            this.error = t('invalid_datetime', this.locale);
+            this.displayValue = trimmed;
+            return '';
+        }
+        const localValue = local !== null && local !== void 0 ? local : '';
+        this.error = requiredError(localValue, this.required, this.locale);
+        this.displayValue = localValue ? formatLocalDateTime(localValue, this.locale) : '';
+        return this.localToUtc(localValue);
+    }
+    /** The local 'YYYY-MM-DDTHH:mm' currently shown, so the picker opens on the right moment. */
+    currentLocal() {
+        var _a;
+        return (_a = (this.displayValue ? parseLocalizedDateTime(this.displayValue, this.locale) : '')) !== null && _a !== void 0 ? _a : '';
+    }
     render() {
-        return (h(Host, { key: '6f8020590ac879992058aa9547b90c11250fa303' }, h("div", { key: '76abff48cae58d156540181a6577729a449bb888', class: "mrd-datetime-field" }, h(FieldLabel, { key: 'a8c3688980347a27d6467987f11a3c4135ac5234', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '1bb1aa7536a6a82313f51240030c828028cafd76', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'c97301640980bf04311751124fc8e87023d59f87', base: "mrd-datetime-field", error: this.error }))));
+        return (h(Host, { key: 'e075e65c76a627a8f19db488c07704e2b1a7270b' }, h("div", { key: 'a6b5a5df3168272f1f775933dfc372e1b2ccbd95', class: "mrd-datetime-field" }, h(FieldLabel, { key: '39e232c066b8c354eeda7df9bcba4e3f95c18ee5', base: "mrd-datetime-field", label: this.label, required: this.required }), h("div", { key: '4ffac4089cbb9e5506aa0854c8b1f15862bc8456', class: "mrd-datetime-field__control" }, h("input", { key: 'd33400133173c7f3e8b045339f44fbeba7f0b35a', class: controlClass('mrd-datetime-field', !!this.error), type: "text", name: this.name, value: this.displayValue, placeholder: this.patternPlaceholder(), autocomplete: "off", required: this.required, disabled: this.disabled, onFocus: this.handleFocus, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("span", { key: '54d8d3b1f508d6226d1341d87c1fec19d5914a10', class: "mrd-datetime-field__picker" }, h("button", { key: '27cd3977984eedd9e3471dd039fc73798f1c7abc', type: "button", class: "mrd-datetime-field__picker-button", title: t('open_calendar', this.locale), "aria-label": t('open_calendar', this.locale), disabled: this.disabled, onClick: this.openPicker }, h("svg", { key: '634ca817fa001263933795e35e1a215a06da7a77', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "aria-hidden": "true" }, h("rect", { key: '66eadf6b2cfee53376f6ea0f50dbd2ec04fc5663', x: "3", y: "4.5", width: "14", height: "12", rx: "2" }), h("path", { key: '4bb61793e0501bd18bb16c4e203b20f509692970', d: "M3 8.5h14M7 2.5v3M13 2.5v3", "stroke-linecap": "round" }))), h("input", { key: '8877da44e4dc527e7c05244359a0caf9d2e81fdd', class: "mrd-datetime-field__picker-native", type: "datetime-local", ref: el => (this.nativeInput = el), value: this.currentLocal(), disabled: this.disabled, tabIndex: -1, "aria-hidden": "true", onChange: this.handlePickerChange }))), h(FieldError, { key: '4ee97180614972c4dd334d68873a9fb7f91e48f5', base: "mrd-datetime-field", error: this.error }))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }
@@ -115,7 +194,7 @@ export class MrdDatetimeField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "UTC ISO string, e.g. '2026-07-06T12:30:00Z'."
                 },
                 "getter": false,
                 "setter": false,
@@ -123,6 +202,26 @@ export class MrdDatetimeField {
                 "attribute": "value",
                 "defaultValue": "''"
             },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj uu:mm')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -187,8 +286,8 @@ export class MrdDatetimeField {
     }
     static get states() {
         return {
-            "error": {},
-            "localValue": {}
+            "displayValue": {},
+            "error": {}
         };
     }
     static get events() {
@@ -228,6 +327,9 @@ export class MrdDatetimeField {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "locale",
+                "methodName": "localeChanged"
             }];
     }
 }

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

@@ -24,7 +24,7 @@ export class MrdEmailField {
         };
     }
     render() {
-        return (h(Host, { key: '3253124dadc7f0b3f120c11f8c35604a2f671b0a' }, h("div", { key: 'db820652452145c30f21b41a65942c0a4c6f45f1', class: "mrd-email-field" }, h(FieldLabel, { key: '8b1c5a84afce9fd18c3f644e5c92f07363e116d4', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: 'dc4bada3208aa6cb7585b1872f53605177371493', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'c44377d1b6a4a4c468b080b23eecd4ba9ca326e1', base: "mrd-email-field", error: this.error }))));
+        return (h(Host, { key: 'e185145e628e3a23dd338d93dd8e42bf11569728' }, h("div", { key: '7d77dd982543a8add5fa1f47aa7985cc15079080', class: "mrd-email-field" }, h(FieldLabel, { key: '14eb00a535a052ebe3cb2793cc7dfc05168c402b', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '11fb9856144f7da30a054b4433350d80d316de64', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'be33c0a43cd99a7152c1d10b7067ea5e52834742', base: "mrd-email-field", error: this.error }))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }