@mmlogic/components 0.5.2 → 0.5.4

package/dist/collection/components/invoice/mrd-invoice-view/mrd-invoice-view.css

@@ -0,0 +1,145 @@
+:host {
+  display: block;
+}
+
+.mrd-invoice-view {
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-6);
+}
+.mrd-invoice-view__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-3);
+  flex-wrap: wrap;
+}
+.mrd-invoice-view__title {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.mrd-invoice-view__badge {
+  display: inline-block;
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  padding: 2px var(--mrd-space-3);
+  border-radius: var(--mrd-border-radius-full);
+}
+.mrd-invoice-view__badge--plain {
+  color: var(--mrd-color-neutral-600);
+  background: var(--mrd-color-neutral-100);
+}
+.mrd-invoice-view__dates {
+  display: flex;
+  gap: var(--mrd-space-4);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-400);
+  font-variant-numeric: tabular-nums;
+  margin-top: var(--mrd-space-1);
+}
+.mrd-invoice-view__container-link {
+  display: inline-block;
+  margin-top: var(--mrd-space-3);
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+  text-align: left;
+}
+.mrd-invoice-view__container-link:hover {
+  text-decoration: underline;
+}
+.mrd-invoice-view__parties {
+  display: flex;
+  gap: var(--mrd-space-8);
+  flex-wrap: wrap;
+}
+.mrd-invoice-view__party {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+.mrd-invoice-view__party-label {
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-400);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.mrd-invoice-view__link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+  text-align: left;
+}
+.mrd-invoice-view__link:hover {
+  text-decoration: underline;
+}
+.mrd-invoice-view__lines {
+  border-top: var(--mrd-border-width) solid var(--mrd-color-neutral-200);
+  border-bottom: var(--mrd-border-width) solid var(--mrd-color-neutral-200);
+  padding: var(--mrd-space-4) 0;
+}
+.mrd-invoice-view__amounts {
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+  min-width: 16rem;
+}
+.mrd-invoice-view__amount-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--mrd-space-6);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+}
+.mrd-invoice-view__amount-row--total {
+  padding-top: var(--mrd-space-2);
+  border-top: var(--mrd-border-width) solid var(--mrd-color-neutral-200);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-invoice-view__attachments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+}
+.mrd-invoice-view__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  align-self: flex-start;
+  height: 2rem;
+  padding: 0 var(--mrd-space-3);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-300);
+  border-radius: var(--mrd-border-radius);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-700);
+  cursor: pointer;
+}
+.mrd-invoice-view__attachment:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-invoice-view__attachment-icon {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  flex-shrink: 0;
+}

package/dist/collection/components/invoice/mrd-invoice-view/mrd-invoice-view.js

@@ -0,0 +1,281 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { formatCurrency, formatDate } from "../../../utils/format";
+import { attachmentsFromRecord, attachmentsKey } from "../../../utils/document-attachments";
+/**
+ * Archetype-driven single-invoice view. Given a `commons.invoice` binding and a data
+ * record, renders a clear, recognisable invoice summary — number, status, dates,
+ * customer/supplier, totals and attachments — instead of a generic field form.
+ *
+ * The line items (`lines` slot, the `commons.invoiceLine` sub-archetype) are NOT
+ * rendered here: this component only reserves a `slot="lines"` at the right spot in
+ * the layout. The host (`mrd-layout-section`) still owns all the actual RELATED_VIEW
+ * table data-loading/event wiring — via its existing `renderRelatedView()` — and
+ * projects the resulting `<mrd-table>` into that slot, so line editing keeps using
+ * the same generic create/edit-navigation mechanism every other relation already has.
+ *
+ * Like `mrd-document-view`, this component never resolves file hrefs itself — it only
+ * exposes the attachment references via `mrdAttachments` (now possibly more than one)
+ * and a plain download button; the host decides how/whether to render them.
+ */
+export class MrdInvoiceView {
+    constructor() {
+        /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
+        this.data = {};
+        this.locale = navigator.language;
+        /** listItems of the FIELD bound to the `status` slot, resolved by mrd-layout-section
+         *  from its own items array (archetype metadata does not publish listItems), so the
+         *  status badge can get a real label/color instead of the raw stored key. */
+        this.statusListItems = null;
+        /** Tracks the key attachments were last emitted for, so componentDidLoad and the
+         *  data watcher don't emit duplicate events for the same set of files. */
+        this.lastAttachmentKey = null;
+    }
+    componentDidLoad() {
+        this.emitAttachmentsIfNeeded();
+    }
+    dataChanged() {
+        this.emitAttachmentsIfNeeded();
+    }
+    emitAttachmentsIfNeeded() {
+        const attachments = attachmentsFromRecord(this.archetype, this.data, 'attachments');
+        const key = attachmentsKey(attachments);
+        if (key === this.lastAttachmentKey)
+            return;
+        this.lastAttachmentKey = key;
+        this.mrdAttachments.emit({ attachments });
+    }
+    /** Value of a value-slot: reads data[field] via the slot→field map. */
+    slotValue(slot) {
+        var _a, _b;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        return this.data[field];
+    }
+    /** Relation link for a relation-slot: reads data._links[field]. */
+    slotLink(slot) {
+        var _a, _b, _c, _d;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        const links = ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c._links) !== null && _d !== void 0 ? _d : {});
+        return links[field];
+    }
+    renderPartyLink(slot, label) {
+        const link = this.slotLink(slot);
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("div", { class: "mrd-invoice-view__party" }, h("span", { class: "mrd-invoice-view__party-label" }, label), h("button", { type: "button", class: "mrd-invoice-view__link", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, link.name)));
+    }
+    renderContainer() {
+        const link = this.slotLink('container');
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("button", { type: "button", class: "mrd-invoice-view__container-link", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, link.name));
+    }
+    renderStatus() {
+        var _a, _b;
+        const statusRaw = this.slotValue('status');
+        if (statusRaw == null || statusRaw === '')
+            return null;
+        const listItem = ((_a = this.statusListItems) !== null && _a !== void 0 ? _a : []).find(li => li.key === String(statusRaw));
+        const label = (_b = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _b !== void 0 ? _b : String(statusRaw);
+        if ((listItem === null || listItem === void 0 ? void 0 : listItem.color) && (listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor)) {
+            return (h("span", { class: "mrd-invoice-view__badge", style: { color: listItem.color, backgroundColor: listItem.backgroundColor } }, label));
+        }
+        return h("span", { class: "mrd-invoice-view__badge mrd-invoice-view__badge--plain" }, label);
+    }
+    renderAmounts() {
+        const net = this.slotValue('netAmount');
+        const tax = this.slotValue('taxAmount');
+        const total = this.slotValue('amount');
+        if ((net === null || net === void 0 ? void 0 : net.amount) == null && (tax === null || tax === void 0 ? void 0 : tax.amount) == null && (total === null || total === void 0 ? void 0 : total.amount) == null)
+            return null;
+        return (h("div", { class: "mrd-invoice-view__amounts" }, (net === null || net === void 0 ? void 0 : net.amount) != null && (h("div", { class: "mrd-invoice-view__amount-row" }, h("span", null, t('invoice_subtotal', this.locale)), h("span", null, formatCurrency(net.amount, net.currency, this.locale)))), (tax === null || tax === void 0 ? void 0 : tax.amount) != null && (h("div", { class: "mrd-invoice-view__amount-row" }, h("span", null, t('invoice_tax', this.locale)), h("span", null, formatCurrency(tax.amount, tax.currency, this.locale)))), (total === null || total === void 0 ? void 0 : total.amount) != null && (h("div", { class: "mrd-invoice-view__amount-row mrd-invoice-view__amount-row--total" }, h("span", null, t('invoice_total', this.locale)), h("span", null, formatCurrency(total.amount, total.currency, this.locale))))));
+    }
+    renderAttachments() {
+        const attachments = attachmentsFromRecord(this.archetype, this.data, 'attachments');
+        if (!attachments.length)
+            return null;
+        return (h("div", { class: "mrd-invoice-view__attachments" }, attachments.map(a => (h("button", { type: "button", key: a.href, class: "mrd-invoice-view__attachment", onClick: () => this.mrdDownload.emit({ href: a.href, fileName: a.fileName }) }, h("svg", { class: "mrd-invoice-view__attachment-icon", 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.44 11.05l-9.19 9.19a5 5 0 01-7.07-7.07l9.19-9.19a3 3 0 014.24 4.24l-9.2 9.19a1 1 0 01-1.41-1.41l8.49-8.48" })), a.fileName)))));
+    }
+    render() {
+        var _a, _b;
+        const invoiceNumberRaw = this.slotValue('invoiceNumber');
+        const invoiceNumber = invoiceNumberRaw != null && invoiceNumberRaw !== '' ? String(invoiceNumberRaw) : null;
+        const invoiceDateRaw = this.slotValue('invoiceDate');
+        const dueDateRaw = this.slotValue('dueDate');
+        const hasLines = !!((_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b['lines']);
+        return (h(Host, { key: 'a97c51e53e39ace913c902ad2ba6813eb85e4561' }, h("div", { key: '6938267848bceed5b28b56c3cdd6d6693e57cdbf', class: "mrd-invoice-view" }, h("div", { key: '7a0b3346232abfc1e35805e4e92c19d35698f881', class: "mrd-invoice-view__header" }, h("div", { key: '5c0471dd8ebd94dd9b374897268c7c03bec66ec7', class: "mrd-invoice-view__title-row" }, invoiceNumber && h("h1", { key: '86b4c0ebd0a5b83ae03b731b7e41394645aae954', class: "mrd-invoice-view__title" }, t('invoice_title', this.locale), " ", invoiceNumber), this.renderStatus()), h("div", { key: 'd209bc34d989146b5f510f2bcdc4c484d723378c', class: "mrd-invoice-view__dates" }, invoiceDateRaw != null && invoiceDateRaw !== '' && (h("span", { key: '8fffcd1ab10e511c9d939c351ea93e4d8a902688' }, t('invoice_date', this.locale), ": ", formatDate(invoiceDateRaw, this.locale))), dueDateRaw != null && dueDateRaw !== '' && (h("span", { key: '8d13c6660798108cc2f54137c8415173326d5bf2' }, t('invoice_due_date', this.locale), ": ", formatDate(dueDateRaw, this.locale)))), this.renderContainer()), h("div", { key: 'cb08c6fd7e6b46a46a69f11aafa960ab5cb35544', class: "mrd-invoice-view__parties" }, this.renderPartyLink('customer', t('invoice_customer', this.locale)), this.renderPartyLink('supplier', t('invoice_supplier', this.locale))), hasLines && (h("div", { key: '8321e74171fe933a4e10fc202b66cd3720ba959e', class: "mrd-invoice-view__lines" }, h("slot", { key: 'eb31d97080173413e74e5b0024984a4b06aa5bdd', name: "lines" }))), this.renderAmounts(), this.renderAttachments())));
+    }
+    static get is() { return "mrd-invoice-view"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-invoice-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-invoice-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "archetype": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype",
+                    "resolved": "ClientArchetype",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved `commons.invoice` binding: slot name \u2192 concrete field/relation name."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data record from the /data endpoint. Fields keyed by name; relations under `_links`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "statusListItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientListValue[] | null",
+                    "resolved": "ClientListValue[] | null",
+                    "references": {
+                        "ClientListValue": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientListValue",
+                            "referenceLocation": "ClientListValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "listItems of the FIELD bound to the `status` slot, resolved by mrd-layout-section\nfrom its own items array (archetype metadata does not publish listItems), so the\nstatus badge can get a real label/color instead of the raw stored key."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigate to the customer/supplier/container. Host resolves the href and routes."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdDownload",
+                "name": "mrdDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Download an attachment. Host resolves the href to a signed URL."
+                },
+                "complexType": {
+                    "original": "{ href: string; fileName: string }",
+                    "resolved": "{ href: string; fileName: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdAttachments",
+                "name": "mrdAttachments",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The file(s) belonging to this invoice, fired once on load and again whenever the\nattachments slot's value changes. The host resolves the href(s) itself."
+                },
+                "complexType": {
+                    "original": "{ attachments: DocumentAttachment[] }",
+                    "resolved": "{ attachments: DocumentAttachment[]; }",
+                    "references": {
+                        "DocumentAttachment": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::DocumentAttachment",
+                            "referenceLocation": "DocumentAttachment"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "dataChanged"
+            }];
+    }
+}

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));
@@ -27,7 +28,7 @@ function renderSingleFieldValue(ctx, item, value) {
             const v = value;
             const fileName = (_e = v === null || v === void 0 ? void 0 : v.fileName) !== null && _e !== void 0 ? _e : String(value);
             const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
-            return downloadLink(ctx, href, fileName, t('download', ctx.locale));
+            return downloadLink(ctx, href, fileName, fileName || t('download', ctx.locale));
         }
         case ClientLayoutItemFieldDataType.IMAGE: {
             const v = value;
@@ -66,6 +67,10 @@ export function renderFieldValue(ctx, item, rawValue) {
     if (rawValue == null || rawValue === '')
         return null;
     if (item.multiple && Array.isArray(rawValue)) {
+        const isFileType = item.dataType === ClientLayoutItemFieldDataType.FILE || item.dataType === ClientLayoutItemFieldDataType.IMAGE;
+        if (isFileType) {
+            return (h("div", { class: "mrd-layout-section__file-list" }, rawValue.map((v, i) => (h("div", { class: "mrd-layout-section__file-list-item", key: String(i) }, renderSingleFieldValue(ctx, item, v))))));
+        }
         const rendered = rawValue.map(v => renderSingleFieldValue(ctx, item, v));
         if (rendered.every(r => typeof r === 'string' || r == null)) {
             return rendered.filter(Boolean).join(', ') || null;
@@ -102,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;
@@ -170,6 +174,16 @@
   width: 1rem;
   height: 1rem;
 }
+.mrd-layout-section__file-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mrd-space-1);
+}
+.mrd-layout-section__file-list-item {
+  min-width: 0;
+  max-width: 100%;
+}
 .mrd-layout-section__boolean--true {
   color: var(--mrd-color-success);
   font-weight: var(--mrd-font-weight-semibold);

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, } from "../../../types/client-layout";
-import { viewKeyFor, flattenItems, buildContainerHref } from "./layout-helpers";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, ARCHETYPE_INVOICE, ARCHETYPE_EMAIL, ARCHETYPE_INVOICE_LINE, } from "../../../types/client-layout";
+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;
@@ -313,23 +313,53 @@ export class MrdLayoutSection {
             return null;
         return (h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
     }
+    /** Related VIEW/RELATED_VIEW/SEARCH items to keep rendering below an archetype's
+     *  single-object view, excluding any item already consumed by that view itself
+     *  (e.g. invoice's `lines`, see renderInvoiceObject). */
+    relatedItems(exclude) {
+        return this.items.filter(it => it !== exclude &&
+            (it.type === ClientLayoutItemType.VIEW || it.type === ClientLayoutItemType.RELATED_VIEW || it.type === ClientLayoutItemType.SEARCH));
+    }
     /** Single-document view: the record's own type carries commons.document. Renders
      *  a recognisable document instead of generic fields, keeping any related views/
      *  searches below it. */
     renderDocumentObject(archetype) {
-        const related = this.items.filter(it => it.type === ClientLayoutItemType.VIEW ||
-            it.type === ClientLayoutItemType.RELATED_VIEW ||
-            it.type === ClientLayoutItemType.SEARCH);
         return [
             h("mrd-document-view", { archetype: archetype, data: this.data, locale: this.locale, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdAttachments: (e) => { e.stopPropagation(); this.mrdAttachments.emit(e.detail); } }),
-            ...related.map(it => this.renderItem(it)),
+            ...this.relatedItems().map(it => this.renderItem(it)),
+        ];
+    }
+    /** Single-invoice view: the record's own type carries commons.invoice. The `lines`
+     *  RELATED_VIEW (matched generically by the commons.invoiceLine archetype on the
+     *  item, not by name) is rendered *inside* mrd-invoice-view via its `slot="lines"` —
+     *  reusing the existing renderRelatedView()/renderTable() wiring unchanged, so all
+     *  page/sort/aggregation state stays owned here, only the DOM placement moves. */
+    renderInvoiceObject(archetype) {
+        var _a, _b, _c;
+        const linesItem = (_a = this.items.find(it => {
+            var _a, _b;
+            return (it.type === ClientLayoutItemType.VIEW || it.type === ClientLayoutItemType.RELATED_VIEW) &&
+                !!resolveArchetype((_a = it.archetypes) !== null && _a !== void 0 ? _a : (_b = it.view) === null || _b === void 0 ? void 0 : _b.archetypes, ARCHETYPE_INVOICE_LINE);
+        })) !== null && _a !== void 0 ? _a : null;
+        const statusListItems = (_c = (_b = this.items.find(it => { var _a; return it.name === ((_a = archetype.slots) === null || _a === void 0 ? void 0 : _a.status); })) === null || _b === void 0 ? void 0 : _b.listItems) !== null && _c !== void 0 ? _c : null;
+        return [
+            h("mrd-invoice-view", { archetype: archetype, data: this.data, locale: this.locale, statusListItems: statusListItems, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdAttachments: (e) => { e.stopPropagation(); this.mrdAttachments.emit(e.detail); } }, linesItem && h("div", { slot: "lines" }, this.renderRelatedView(linesItem))),
+            ...this.relatedItems(linesItem).map(it => this.renderItem(it)),
+        ];
+    }
+    /** Single-email view: the record's own type carries commons.email. Fully read-only —
+     *  emails have no editable child collection, so this mirrors renderDocumentObject. */
+    renderEmailObject(archetype) {
+        return [
+            h("mrd-email-view", { archetype: archetype, data: this.data, locale: this.locale, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdAttachments: (e) => { e.stopPropagation(); this.mrdAttachments.emit(e.detail); } }),
+            ...this.relatedItems().map(it => this.renderItem(it)),
         ];
     }
     render() {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
-        return (h(Host, { key: '8585dae577d38e3c9517039b48aa9e798190937c' }, h("div", { key: '020b942996b1346bdc3bc89938e4b020823cfcea', class: "mrd-layout-section" }, docArchetype
-            ? this.renderDocumentObject(docArchetype)
-            : this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        const invoiceArchetype = !docArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_INVOICE) : undefined;
+        const emailArchetype = !docArchetype && !invoiceArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_EMAIL) : undefined;
+        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/components/merge/mrd-merge-view/mrd-merge-view.js

@@ -121,14 +121,14 @@ export class MrdMergeView {
         var _a, _b;
         let stepContent;
         if (this.step === 'search') {
-            stepContent = (h(MergeSearchStep, { key: '4b79504f62f85274c9cd9681b6819c2318f4246a', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+            stepContent = (h(MergeSearchStep, { key: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', 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' ? (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 })) : (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 (h(Host, { key: 'f3fc046fa728646e2ff686d2eae30024da3121e1' }, h("div", { key: '55bef786973d22dce49be021cfb78588b119139c', class: "mrd-merge-view" }, stepContent)));
+        return (h(Host, { key: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', class: "mrd-merge-view" }, stepContent)));
     }
     static get is() { return "mrd-merge-view"; }
     static get encapsulation() { return "scoped"; }