@mmlogic/components 0.5.3 → 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-7KX9Qbml.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/documents/mrd-document-container/mrd-document-container.css

@@ -42,6 +42,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+.mrd-document-container__file-input {
+  display: none;
+}
 .mrd-document-container__seg {
   display: inline-flex;
   gap: 2px;

package/dist/collection/components/documents/mrd-document-container/mrd-document-container.js

@@ -32,12 +32,28 @@ export class MrdDocumentContainer {
         this.mode = 'tree';
         /** Whether the folder tree currently has a valid target for "New folder". */
         this.canCreate = false;
+        /** Name of that target (folder path, or the container's label), for the upload tooltip. */
+        this.targetLabel = '';
         /** Whether the currently mounted table has been init()'d. Reset on every mode switch. */
         this.tableInited = false;
         this.createFolder = () => {
             var _a;
             (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.createFolder();
         };
+        this.pickFile = () => {
+            var _a;
+            (_a = this.fileInputEl) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        /** One file per upload, matching the drop handler. Reset the input afterwards
+         *  so picking the same file twice in a row still fires a change event. */
+        this.onFilePicked = (e) => {
+            var _a, _b;
+            const input = e.target;
+            const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file)
+                (_b = this.listEl) === null || _b === void 0 ? void 0 : _b.uploadFile(file);
+            input.value = '';
+        };
     }
     /** The embedded table does not self-load: like every mrd-table it waits for the
      *  host to call init() (which emits mrdLoadPage, and — once page 0 lands —
@@ -62,7 +78,7 @@ export class MrdDocumentContainer {
     }
     // ── Toolbar ────────────────────────────────────────────────────────────────
     renderToolbar() {
-        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
+        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, title: this.targetLabel ? `${t('doc_upload_to', this.locale)} ${this.targetLabel}` : undefined, onClick: this.pickFile }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("path", { d: "M12 3v13M7 8l5-5 5 5" })), t('doc_upload', this.locale))), h("input", { type: "file", class: "mrd-document-container__file-input", ref: el => (this.fileInputEl = el), onChange: this.onFilePicked }), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
     }
     // ── Bodies ───────────────────────────────────────────────────────────────
     renderTree() {
@@ -78,6 +94,9 @@ export class MrdDocumentContainer {
             }, onMrdCanCreate: (e) => {
                 e.stopPropagation();
                 this.canCreate = e.detail;
+            }, onMrdTargetLabel: (e) => {
+                e.stopPropagation();
+                this.targetLabel = e.detail;
             }, onMrdUpdateObject: (e) => {
                 e.stopPropagation();
                 this.mrdUpdateObject.emit(e.detail);
@@ -114,7 +133,7 @@ export class MrdDocumentContainer {
     }
     render() {
         const treeMode = this.mode === 'tree';
-        return (h(Host, { key: '4d21f26c956773c63cbf5118394c6afa29d6014d' }, this.renderToolbar(), h("div", { key: 'bc070236bf9a7d0eba57aa2cd70fa3ae36cbf5f1', class: {
+        return (h(Host, { key: 'ae948e2458d9087179e850b527802c489067d93f' }, this.renderToolbar(), h("div", { key: 'a04e1a78413aa794d0bda551aeb9c6245f1aafa2', class: {
                 'mrd-document-container__body': true,
                 'mrd-document-container__body--tree': treeMode,
             }, style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
@@ -287,7 +306,8 @@ export class MrdDocumentContainer {
     static get states() {
         return {
             "mode": {},
-            "canCreate": {}
+            "canCreate": {},
+            "targetLabel": {}
         };
     }
     static get events() {

package/dist/collection/components/documents/mrd-document-list/mrd-document-list.js

@@ -64,6 +64,8 @@ export class MrdDocumentList {
         this.newFolderSeq = 0;
         /** Last emitted canCreateFolder value, to only emit mrdCanCreate on change. */
         this.lastCanCreate = false;
+        /** Last emitted upload-target label, to only emit mrdTargetLabel on change. */
+        this.lastTargetLabel = '';
         // ── Drag & drop (move a document into another folder) ──────────────────────
         /** The document row currently being dragged. */
         this.dragDoc = null;
@@ -237,6 +239,22 @@ export class MrdDocumentList {
             this.lastCanCreate = can;
             this.mrdCanCreate.emit(can);
         }
+        const label = this.targetLabel;
+        if (label !== this.lastTargetLabel) {
+            this.lastTargetLabel = label;
+            this.mrdTargetLabel.emit(label);
+        }
+    }
+    /** Human-readable name of the node a new folder or upload lands in — the
+     *  folder path when one is selected, otherwise the container's own label.
+     *  Empty when there is no target at all. */
+    get targetLabel() {
+        var _a;
+        const resolved = this.resolveTarget();
+        if (!resolved)
+            return '';
+        const { target, container } = resolved;
+        return (_a = folderStringOf(target, container)) !== null && _a !== void 0 ? _a : target.label;
     }
     // ── Slot field names ─────────────────────────────────────────────────────
     get containerField() {
@@ -510,12 +528,28 @@ export class MrdDocumentList {
         this.dropTargetId = null;
         if (!file)
             return;
+        this.beginUpload(file, node, container);
+    }
+    /** Shared by the file drop and the host toolbar's upload button. */
+    beginUpload(file, node, container) {
         this.pendingUpload = { file, node, container };
         node.open = true;
         this.uploadingNodeId = node.id;
         this.bump();
         this.mrdUpload.emit({ file });
     }
+    /** Upload a file into the current target — the selected folder/container, or
+     *  the only container when there is just one. Called by the host toolbar
+     *  (mrd-document-container). No-op without a target, or while another upload
+     *  is still awaiting its setFileReference. */
+    async uploadFile(file) {
+        if (!file || this.pendingUpload)
+            return;
+        const resolved = this.resolveTarget();
+        if (!resolved)
+            return;
+        this.beginUpload(file, resolved.target, resolved.container);
+    }
     /** Host callback with the uploaded file reference. Builds the create payload
      *  from the archetype slots and requests the new document. */
     async setFileReference(uri) {
@@ -650,7 +684,7 @@ export class MrdDocumentList {
             body = renderLoadingRow(ctx, 0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: '308725d741deb384082bd514edd34593f7d662a2', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = h("div", { key: '63604a99fc62d9108f61b8efc126c0cd3e8fc5ed', class: "mrd-document-list__empty" }, t('no_results', this.locale));
         }
         else if (this.singleContainer) {
             // Dossier context: render the single container's folder tree at the root.
@@ -668,7 +702,7 @@ export class MrdDocumentList {
         else {
             body = this.containers.map(c => renderContainerNode(ctx, c, 0));
         }
-        return (h(Host, { key: '9d5fde912999b57a0f0b737980d59e94f385f11d' }, h("div", { key: '17191411c2e626995f08b66bad755342fe3b13ae', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
+        return (h(Host, { key: '2a092e3a7483deb1fb30753b0c0428aaf75c303a' }, h("div", { key: '2b716c912a272b925a95133de5b1ff2abedd9dbc', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
     }
     static get is() { return "mrd-document-list"; }
     static get encapsulation() { return "scoped"; }
@@ -880,6 +914,21 @@ export class MrdDocumentList {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "mrdTargetLabel",
+                "name": "mrdTargetLabel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the current target changes: the folder path a new folder or\nupload lands in, or the container's label when no folder is selected. Empty\nwhen there is no target. Lets a host toolbar name the destination."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }, {
                 "method": "mrdUpdateObject",
                 "name": "mrdUpdateObject",
@@ -1023,6 +1072,31 @@ export class MrdDocumentList {
                     "tags": []
                 }
             },
+            "uploadFile": {
+                "complexType": {
+                    "signature": "(file: File) => Promise<void>",
+                    "parameters": [{
+                            "name": "file",
+                            "type": "File",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Upload a file into the current target \u2014 the selected folder/container, or\nthe only container when there is just one. Called by the host toolbar\n(mrd-document-container). No-op without a target, or while another upload\nis still awaiting its setFileReference.",
+                    "tags": []
+                }
+            },
             "setFileReference": {
                 "complexType": {
                     "signature": "(uri: string) => Promise<void>",

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"
+            }];
+    }
 }