@mmlogic/components 0.5.3 → 0.5.4

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-relation-field/mrd-relation-field.js

@@ -121,16 +121,22 @@ export class MrdRelationField {
     async setAllRecords(records) {
         this.allRecords = records;
     }
+    /** Href of the current single value. Accepts both a RelationSearchResult
+     *  (`id`) and the raw API link shape (`{ href, name }`) a host puts in the
+     *  form values for edit mode — same tolerance as `toSearchResult()`. */
     getValueHref() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
         if (!v)
             return '';
         if (typeof v === 'object')
-            return (_c = v.id) !== null && _c !== void 0 ? _c : '';
+            return (_d = (_c = v.id) !== null && _c !== void 0 ? _c : v.href) !== null && _d !== void 0 ? _d : '';
         return v;
     }
-    allRecordsChanged() {
+    /** Push the current value onto the rendered <select>. Options and value arrive
+     *  independently in edit mode (fetched records vs. the async `values` prop), so
+     *  this runs on both — whichever lands last completes the preselection. */
+    syncDropdownSelection() {
         if (this.editBehavior !== ClientLayoutItemRelationEditBehavior.DROPDOWN)
             return;
         const current = this.getValueHref();
@@ -146,6 +152,9 @@ export class MrdRelationField {
                 select.value = current;
         }, 0);
     }
+    allRecordsChanged() {
+        this.syncDropdownSelection();
+    }
     async setSearchResults(results) {
         this.searchResults = results;
         this.isLoading = false;
@@ -197,6 +206,7 @@ export class MrdRelationField {
     // (host pre-fill). Plain href strings from user interaction are ignored.
     valueChanged(newValue) {
         this.applyValuePrefill(newValue);
+        this.syncDropdownSelection();
     }
     componentDidLoad() {
         // Only emit when there is no commonRelation dependency — the form orchestrates those.

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

@@ -253,15 +253,19 @@ export class MrdForm {
             }
         }
     }
-    /** Extract a plain href string from a form value, which can be a string or
-     *  a RelationSearchResult-like object with an `id` field. */
+    /** Extract a plain href string from a form value: a string, a
+     *  RelationSearchResult-like object (`id`), or the raw API link shape
+     *  (`{ href, name }`) hosts spread into `values` for edit mode. */
     getHref(value) {
+        var _a, _b;
         if (!value)
             return '';
         if (typeof value === 'string')
             return value;
-        if (typeof value === 'object' && 'id' in value)
-            return value.id;
+        if (typeof value === 'object') {
+            const v = value;
+            return (_b = (_a = v.id) !== null && _a !== void 0 ? _a : v.href) !== null && _b !== void 0 ? _b : '';
+        }
         return '';
     }
     collectFields(items) {

package/dist/collection/components/layout/mrd-layout-section/field-value.js

@@ -3,6 +3,7 @@ import { ClientLayoutItemFieldDataType } from "../../../types/client-layout";
 import { CellRenderer } from "../../../utils/cell-renderer";
 import { t } from "../../../utils/i18n";
 import { formatDate } from "../../../utils/format";
+import { showsEmpty } from "./layout-helpers";
 /** FILE and IMAGE cells share the same download button. */
 function downloadLink(ctx, href, fileName, label) {
     return (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && ctx.on.download({ href, fileName }) }, h("svg", { class: "mrd-layout-section__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), label));
@@ -106,10 +107,11 @@ export function renderField(ctx, item) {
     if (item.header) {
         return (h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
     }
-    if (renderedValue == null)
+    const isEmpty = renderedValue == null;
+    if (isEmpty && !showsEmpty(item))
         return null;
     const isBlock = item.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK
         || item.dataType === ClientLayoutItemFieldDataType.LONGTEXT
         || item.dataType === ClientLayoutItemFieldDataType.JSON;
-    return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue, renderHistoryBadge(ctx, item, raw))));
+    return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}${isEmpty ? ' mrd-layout-section__field--empty' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, isEmpty ? t('value_empty', ctx.locale) : renderedValue, renderHistoryBadge(ctx, item, raw))));
 }

package/dist/collection/components/layout/mrd-layout-section/layout-helpers.js

@@ -6,6 +6,12 @@ export function viewKeyFor(item) {
         return (_b = (_a = item.relatedClass) !== null && _a !== void 0 ? _a : item.name) !== null && _b !== void 0 ? _b : '';
     return (_d = (_c = item.dataClass) !== null && _c !== void 0 ? _c : item.name) !== null && _d !== void 0 ? _d : '';
 }
+/** Whether a FIELD/RELATION item stays visible on an OBJECT_DASHBOARD when it
+ *  has no value. Reads the flat API flag, falling back to the nested wrappers. */
+export function showsEmpty(item) {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_c = (_a = item.showEmpty) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.showEmpty) !== null && _c !== void 0 ? _c : (_d = item.relation) === null || _d === void 0 ? void 0 : _d.showEmpty) !== null && _e !== void 0 ? _e : false;
+}
 /** Depth-first flatten of the SECTION/GROUP tree. */
 export function flattenItems(items) {
     const result = [];

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.css

@@ -33,6 +33,10 @@
   align-items: center;
   gap: var(--mrd-space-1);
 }
+.mrd-layout-section__field--empty .mrd-layout-section__field-value {
+  color: var(--mrd-color-neutral-400);
+  font-weight: var(--mrd-font-weight-normal);
+}
 .mrd-layout-section__history-wrap {
   position: relative;
   display: inline-flex;

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, ARCHETYPE_INVOICE, ARCHETYPE_EMAIL, ARCHETYPE_INVOICE_LINE, } from "../../../types/client-layout";
-import { viewKeyFor, flattenItems, buildContainerHref } from "./layout-helpers";
+import { t } from "../../../utils/i18n";
+import { viewKeyFor, flattenItems, buildContainerHref, showsEmpty } from "./layout-helpers";
 import { renderField } from "./field-value";
 export class MrdLayoutSection {
     constructor() {
@@ -173,19 +174,18 @@ export class MrdLayoutSection {
             return null;
         const links = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
         const link = links[item.name];
-        if (!link)
-            return null;
         const makeBtn = (href, name) => (h("button", { key: href, class: "mrd-layout-section__relation-link", onClick: () => this.mrdNavigate.emit({ href, label: name }) }, name));
         let valueContent;
-        if ((_c = link.values) === null || _c === void 0 ? void 0 : _c.length) {
+        if ((_c = link === null || link === void 0 ? void 0 : link.values) === null || _c === void 0 ? void 0 : _c.length) {
             valueContent = link.values.map(v => makeBtn(v.href, v.name));
         }
-        else if (link.name) {
+        else if (link === null || link === void 0 ? void 0 : link.name) {
             valueContent = makeBtn(link.href, link.name);
         }
-        if (!valueContent)
+        const isEmpty = !valueContent;
+        if (isEmpty && !showsEmpty(item))
             return null;
-        return (h("div", { class: "mrd-layout-section__field", key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, valueContent)));
+        return (h("div", { class: `mrd-layout-section__field${isEmpty ? ' mrd-layout-section__field--empty' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, isEmpty ? t('value_empty', this.locale) : valueContent)));
     }
     renderSearch(item) {
         var _a, _b, _c;
@@ -359,7 +359,7 @@ export class MrdLayoutSection {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
         const invoiceArchetype = !docArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_INVOICE) : undefined;
         const emailArchetype = !docArchetype && !invoiceArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_EMAIL) : undefined;
-        return (h(Host, { key: '0078764a136e7ca9561632718c1b527ec3bc01c5' }, h("div", { key: '0c1428ce20bd7d2bbce467a36b6c25ffa0e6367e', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        return (h(Host, { key: 'ccae8e82b4dd549ab24239fe685a6830a508061d' }, h("div", { key: '4072cc4ecdd2b087c54a5515e653f7f713b2150f', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/dev/example-data.js

@@ -223,7 +223,9 @@ window.EXAMPLE_COMPANY_METADATA = {
         { type: 'FIELD', label: 'legal form extended', name: 'legalFormExtended', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'rsin', name: 'rsin', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'start date', name: 'startDate', dataType: 'DATE', required: false },
-        { type: 'FIELD', label: 'end date', name: 'endDate', dataType: 'DATE', required: false },
+        // showEmpty demo (TASK-0231): endDate is null on EXAMPLE_COMPANY, so it
+        // stays visible with a placeholder instead of being hidden.
+        { type: 'FIELD', label: 'end date', name: 'endDate', dataType: 'DATE', required: false, showEmpty: true },
         { type: 'FIELD', label: 'primary activity description', name: 'primaryActivityDescription', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'primary activity code', name: 'primaryActivityCode', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'total employees', name: 'totalEmployees', dataType: 'INTEGER', required: false },
@@ -243,6 +245,9 @@ window.EXAMPLE_COMPANY_METADATA = {
         { type: 'FIELD', label: 'mailing postal code', name: 'mailingPostalCode', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'mailing city', name: 'mailingCity', dataType: 'TEXT', required: false },
         { type: 'RELATION', label: 'country', name: 'country', relatedClass: 'commons.country', mostSignificantClass: 'countries', required: false },
+        // showEmpty demo (TASK-0231): no `parentCompany` link on EXAMPLE_COMPANY,
+        // so the relation still renders with a placeholder value.
+        { type: 'RELATION', label: 'parent company', name: 'parentCompany', relatedClass: 'commons.company', mostSignificantClass: 'companies', required: false, showEmpty: true },
       ],
     },
     {

package/dist/collection/utils/i18n.js

@@ -27,6 +27,7 @@ const translations = {
         // mrd-table footer
         table_of: 'van',
         download: 'Downloaden',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'Filteren',
         table_filter_hide: 'Filter verbergen',
@@ -36,6 +37,8 @@ const translations = {
         table_export_excel: 'Exporteer naar Excel',
         doc_view_switch: 'Weergave wisselen',
         doc_view_tree: 'Boomweergave',
+        doc_upload: 'Uploaden',
+        doc_upload_to: 'Uploaden naar',
         doc_view_list: 'Lijstweergave',
         // mrd-table filter popup
         filter_sorting: 'Sortering',
@@ -129,6 +132,7 @@ const translations = {
         // mrd-table footer
         table_of: 'of',
         download: 'Download',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'Filter',
         table_filter_hide: 'Hide filter',
@@ -138,6 +142,8 @@ const translations = {
         table_export_excel: 'Export to Excel',
         doc_view_switch: 'Switch view',
         doc_view_tree: 'Tree view',
+        doc_upload: 'Upload',
+        doc_upload_to: 'Upload to',
         doc_view_list: 'List view',
         // mrd-table filter popup
         filter_sorting: 'Sorting',
@@ -231,6 +237,7 @@ const translations = {
         // mrd-table footer
         table_of: 'من أصل',
         download: 'تنزيل',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'تصفية',
         table_filter_hide: 'إخفاء التصفية',
@@ -240,6 +247,8 @@ const translations = {
         table_export_excel: 'تصدير إلى Excel',
         doc_view_switch: 'تبديل العرض',
         doc_view_tree: 'عرض شجري',
+        doc_upload: 'رفع',
+        doc_upload_to: 'رفع إلى',
         doc_view_list: 'عرض القائمة',
         // mrd-table filter popup
         filter_sorting: 'الترتيب',
@@ -327,6 +336,7 @@ const translations = {
         // mrd-table footer
         table_of: 'sur',
         download: 'Télécharger',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'Filtrer',
         table_filter_hide: 'Masquer le filtre',
@@ -336,6 +346,8 @@ const translations = {
         table_export_excel: 'Exporter vers Excel',
         doc_view_switch: 'Changer de vue',
         doc_view_tree: 'Vue arborescente',
+        doc_upload: 'Téléverser',
+        doc_upload_to: 'Téléverser vers',
         doc_view_list: 'Vue liste',
         // mrd-table filter popup
         filter_sorting: 'Tri',
@@ -423,6 +435,7 @@ const translations = {
         // mrd-table footer
         table_of: 'von',
         download: 'Herunterladen',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'Filtern',
         table_filter_hide: 'Filter ausblenden',
@@ -432,6 +445,8 @@ const translations = {
         table_export_excel: 'Als Excel exportieren',
         doc_view_switch: 'Ansicht wechseln',
         doc_view_tree: 'Baumansicht',
+        doc_upload: 'Hochladen',
+        doc_upload_to: 'Hochladen nach',
         doc_view_list: 'Listenansicht',
         // mrd-table filter popup
         filter_sorting: 'Sortierung',
@@ -519,6 +534,7 @@ const translations = {
         // mrd-table footer
         table_of: 'de',
         download: 'Descargar',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'Filtrar',
         table_filter_hide: 'Ocultar filtro',
@@ -528,6 +544,8 @@ const translations = {
         table_export_excel: 'Exportar a Excel',
         doc_view_switch: 'Cambiar vista',
         doc_view_tree: 'Vista de árbol',
+        doc_upload: 'Subir',
+        doc_upload_to: 'Subir a',
         doc_view_list: 'Vista de lista',
         // mrd-table filter popup
         filter_sorting: 'Ordenación',
@@ -615,6 +633,7 @@ const translations = {
         // mrd-table footer
         table_of: 'di',
         download: 'Scarica',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'Filtra',
         table_filter_hide: 'Nascondi filtro',
@@ -624,6 +643,8 @@ const translations = {
         table_export_excel: 'Esporta in Excel',
         doc_view_switch: 'Cambia vista',
         doc_view_tree: 'Vista ad albero',
+        doc_upload: 'Carica',
+        doc_upload_to: 'Carica in',
         doc_view_list: 'Vista elenco',
         // mrd-table filter popup
         filter_sorting: 'Ordinamento',
@@ -711,6 +732,7 @@ const translations = {
         // mrd-table footer
         table_of: 'з',
         download: 'Завантажити',
+        value_empty: '—',
         // mrd-table toolbar
         table_filter: 'Фільтрувати',
         table_filter_hide: 'Сховати фільтр',
@@ -720,6 +742,8 @@ const translations = {
         table_export_excel: 'Експортувати до Excel',
         doc_view_switch: 'Змінити вигляд',
         doc_view_tree: 'Деревоподібний вигляд',
+        doc_upload: 'Завантажити',
+        doc_upload_to: 'Завантажити до',
         doc_view_list: 'Список',
         // mrd-table filter popup
         filter_sorting: 'Сортування',