@mmlogic/components 0.5.2 → 0.5.3

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

@@ -20,7 +20,7 @@ export class MrdTimeField {
         };
     }
     render() {
-        return (h(Host, { key: '588e298c4f52aa4e65d87bfdc6918282ed97b3ae' }, h("div", { key: 'eed7332ca78747d4ff8b6c8d06ad4674e1c37e69', class: "mrd-time-field" }, h(FieldLabel, { key: '6383beb79fd05dabdc408256e3326f9637e4c993', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'b372d8b5dd523ee6182fe302450ce904ac17cc3c', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '7d8ce1e557bf583c0409e8f02893a15fadeab634', base: "mrd-time-field", error: this.error }))));
+        return (h(Host, { key: 'd521c654bc7beda71a31542a25198edaaf53b838' }, h("div", { key: '084ab16ac8aed952bd0ec50e0430591d4db5bd4b', class: "mrd-time-field" }, h(FieldLabel, { key: '43938ad7c5a9765353f6523d399d4b74cbb9ec6f', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'e46eda620e7a5f1bb3b433a4c051e913675c33f9', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '34bc1eaa1b969951dffaaacad73af532b6d290fb', base: "mrd-time-field", error: this.error }))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -111,7 +111,7 @@ export class MrdField {
         return (h("div", { class: "mrd-field__history-editor" }, this.historyEntries.length > 0 && (h("span", { class: "mrd-field__history-editor-label" }, t('history_badge_tooltip', locale))), this.historyEntries.map((entry, i) => (h("div", { key: String(i), class: "mrd-field__history-editor-row" }, h("input", { class: "mrd-field__history-editor-value", type: valueType, value: entry.value, onInput: (e) => updateEntry(i, 'value', e.target.value) }), h("span", { class: "mrd-field__history-editor-sep" }, t('history_until', locale)), h("input", { class: "mrd-field__history-editor-until", type: "date", value: entry.until, onInput: (e) => updateEntry(i, 'until', e.target.value) }), h("button", { type: "button", class: "mrd-field__history-editor-remove", onClick: () => removeEntry(i), "aria-label": t('remove', locale) }, h("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z", "clip-rule": "evenodd" })))))), h("button", { type: "button", class: "mrd-field__history-editor-add", onClick: addEntry }, "+ ", t('add', locale))));
     }
     renderLeafField(displayValue) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
         const { item, locale } = this;
         const commonProps = {
             name: item.name,
@@ -148,13 +148,13 @@ export class MrdField {
             case ClientLayoutItemFieldDataType.LIST:
                 return (h("mrd-list-field", Object.assign({}, commonProps, { value: (_u = displayValue) !== null && _u !== void 0 ? _u : '', multiple: (_v = item.multiple) !== null && _v !== void 0 ? _v : false, listItems: (_w = item.listItems) !== null && _w !== void 0 ? _w : [] })));
             case ClientLayoutItemFieldDataType.FILE:
-                return (h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_x = item.accept) !== null && _x !== void 0 ? _x : '', maxSize: (_y = item.maxSize) !== null && _y !== void 0 ? _y : 0, onMrdUpload: this.handleUpload })));
+                return (h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_x = item.accept) !== null && _x !== void 0 ? _x : '', maxSize: (_y = item.maxSize) !== null && _y !== void 0 ? _y : 0, multiple: (_z = item.multiple) !== null && _z !== void 0 ? _z : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.IMAGE:
-                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_z = item.accept) !== null && _z !== void 0 ? _z : 'image/*', maxSize: (_0 = item.maxSize) !== null && _0 !== void 0 ? _0 : 0, onMrdUpload: this.handleUpload })));
+                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_0 = item.accept) !== null && _0 !== void 0 ? _0 : 'image/*', maxSize: (_1 = item.maxSize) !== null && _1 !== void 0 ? _1 : 0, multiple: (_2 = item.multiple) !== null && _2 !== void 0 ? _2 : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.LONGTEXT:
-                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_1 = displayValue) !== null && _1 !== void 0 ? _1 : '', placeholder: (_2 = item.placeholder) !== null && _2 !== void 0 ? _2 : '' })));
+                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
             case ClientLayoutItemFieldDataType.SECRET:
-                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
+                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_5 = displayValue) !== null && _5 !== void 0 ? _5 : '', placeholder: (_6 = item.placeholder) !== null && _6 !== void 0 ? _6 : '' })));
             default:
                 return null;
         }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../../types";
+import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../../types";
 import { t } from "../../../utils/i18n";
 import { validateRequired } from "../../../utils/validation";
 export class MrdForm {
@@ -199,7 +199,31 @@ export class MrdForm {
         }
         return null;
     }
-    async setFieldValue(name, value) {
+    /**
+     * Inject a value from outside (e.g. after a file upload completes).
+     * `file` is optional and only meaningful for `multiple` FILE/IMAGE fields: when
+     * the field's current value is an array, mrd-form replaces the array entry that
+     * `=== file` with `value`, leaving other pending/resolved entries untouched —
+     * this is how mrd-file-field/mrd-image-field resolve concurrent per-file uploads.
+     * Pass the `file` from the originating mrdUpload event back unchanged.
+     */
+    async setFieldValue(name, value, file) {
+        if (file) {
+            const current = this.formValues[name];
+            if (Array.isArray(current)) {
+                const index = current.indexOf(file);
+                if (index === -1)
+                    return; // the file was removed from the field before its upload resolved
+                const next = [...current];
+                next[index] = value;
+                this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: next });
+                if (this.errors[name])
+                    this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
+                return;
+            }
+            if (current !== file)
+                return; // stale resolution for a value that was since cleared/replaced
+        }
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
         if (this.errors[name]) {
             this.errors = Object.assign(Object.assign({}, this.errors), { [name]: '' });
@@ -269,6 +293,20 @@ export class MrdForm {
     normalizeFieldValue(value) {
         return (value === '' || value == null) ? null : value;
     }
+    /** FILE/IMAGE entries render as `{ href, fileName, contentType?, size? }` — the same
+     *  shape the API returns for an already-persisted file — or a bare href string for
+     *  freshly-resolved uploads. Only `href` is meaningful to the API, so unwrap before
+     *  submit (mirrors normalizeRelationValue). Do NOT fall back to any other key (e.g.
+     *  `id`) as a stand-in for `href` — a bare id is not a valid/complete reference on its
+     *  own; if `href` is ever missing that's an API bug to fix upstream, not to paper over here. */
+    normalizeFileFieldValue(value) {
+        const toHref = (v) => v && typeof v === 'object' && 'href' in v ? v.href : v;
+        if (Array.isArray(value)) {
+            const hrefs = value.map(toHref).filter(v => v != null && v !== '');
+            return hrefs.length ? hrefs : null;
+        }
+        return this.normalizeFieldValue(toHref(value));
+    }
     normalizeRelationValue(value) {
         if (value == null || value === '')
             return null;
@@ -315,8 +353,11 @@ export class MrdForm {
                 const rawValue = this.formValues[name];
                 if (rawValue instanceof File)
                     continue;
-                const current = this.normalizeFieldValue(rawValue);
-                const initial = this.normalizeFieldValue(this.initialValues[name]);
+                if (Array.isArray(rawValue) && rawValue.some(v => v instanceof File))
+                    continue;
+                const isFileField = item.dataType === ClientLayoutItemFieldDataType.FILE || item.dataType === ClientLayoutItemFieldDataType.IMAGE;
+                const current = isFileField ? this.normalizeFileFieldValue(rawValue) : this.normalizeFieldValue(rawValue);
+                const initial = isFileField ? this.normalizeFileFieldValue(this.initialValues[name]) : this.normalizeFieldValue(this.initialValues[name]);
                 if (this.deepEqual(current, initial))
                     continue;
                 payload[name] = current;
@@ -619,7 +660,7 @@ export class MrdForm {
         return {
             "setFieldValue": {
                 "complexType": {
-                    "signature": "(name: string, value: unknown) => Promise<void>",
+                    "signature": "(name: string, value: unknown, file?: File) => Promise<void>",
                     "parameters": [{
                             "name": "name",
                             "type": "string",
@@ -628,17 +669,25 @@ export class MrdForm {
                             "name": "value",
                             "type": "unknown",
                             "docs": ""
+                        }, {
+                            "name": "file",
+                            "type": "File | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Inject a value from outside (e.g. after a file upload completes).\n`file` is optional and only meaningful for `multiple` FILE/IMAGE fields: when\nthe field's current value is an array, mrd-form replaces the array entry that\n`=== file` with `value`, leaving other pending/resolved entries untouched \u2014\nthis is how mrd-file-field/mrd-image-field resolve concurrent per-file uploads.\nPass the `file` from the originating mrdUpload event back unchanged.",
                     "tags": []
                 }
             }

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

@@ -27,7 +27,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 +66,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;

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

@@ -170,6 +170,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);