@mmlogic/components 0.4.2 → 0.5.0

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

@@ -1,47 +1,46 @@
 import { Host, h } from "@stencil/core";
 import { t } from "../../../utils/i18n";
 import { formatDate } from "../../../utils/format";
+import { attachmentsFromRecord } from "../../../utils/document-attachments";
 /**
  * Archetype-driven single-document view. Given a `commons.document` binding and a
- * data record, renders the document recognisably — title, file preview/download,
+ * data record, renders the document recognisably — title, filename/download,
  * summary and date — plus a navigation link to the container (the dossier),
  * instead of a generic field form.
  *
  * The component keys on the slot→field map (`archetype.slots`) to locate values:
  * value slots read `data[field]`; the `container` relation slot reads
  * `data._links[field]` (`{ href, name }`). Empty slots are omitted.
+ *
+ * This component never renders the file itself (no iframe/image preview) — it
+ * only ever exposes the file reference via `mrdAttachments`. The host resolves
+ * the href and decides how (or whether) to show it inline, so the preview can
+ * live anywhere in the host's own layout instead of being boxed into this
+ * component's DOM (see TASK-0165 / FINDING-0111).
  */
 export class MrdDocumentView {
     constructor() {
         /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
         this.data = {};
         this.locale = navigator.language;
-        /** Signed URL for the file's inline preview (mrd-file-preview), resolved by
-         *  the host in response to mrdLoadPreview. Empty while unresolved — the
-         *  preview area shows a loading state until the host injects a value. */
-        this.previewUrl = '';
-        /** Minimum height (px) of the inline preview area — it stretches to fill the
-         *  available row height in the wide side-by-side layout (see mrd-document-view.scss),
-         *  and falls back to this height when stacked. Overlay hosts typically pass a
-         *  smaller value than the full-page default to fit available chrome. */
-        this.previewHeight = 640;
-        /** Tracks the href a preview was last requested for, so componentDidLoad and
-         *  the data watcher don't emit duplicate requests for the same file. */
-        this.lastPreviewHref = null;
+        /** Tracks the href attachments were last emitted for, so componentDidLoad and
+         *  the data watcher don't emit duplicate events for the same file. */
+        this.lastAttachmentHref = null;
     }
     componentDidLoad() {
-        this.requestPreviewIfNeeded();
+        this.emitAttachmentsIfNeeded();
     }
     dataChanged() {
-        this.requestPreviewIfNeeded();
+        this.emitAttachmentsIfNeeded();
     }
-    requestPreviewIfNeeded() {
+    emitAttachmentsIfNeeded() {
         var _a, _b;
-        const href = (_b = (_a = this.slotValue('file')) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : null;
-        if (href && href !== this.lastPreviewHref) {
-            this.lastPreviewHref = href;
-            this.mrdLoadPreview.emit({ href });
-        }
+        const attachments = attachmentsFromRecord(this.archetype, this.data);
+        const href = (_b = (_a = attachments[0]) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : null;
+        if (href === this.lastAttachmentHref)
+            return;
+        this.lastAttachmentHref = href;
+        this.mrdAttachments.emit({ attachments });
     }
     /** Value of a value-slot: reads data[field] via the slot→field map. */
     slotValue(slot) {
@@ -66,26 +65,13 @@ export class MrdDocumentView {
             return null;
         return (h("button", { class: "mrd-document-view__crumb", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, h("svg", { class: "mrd-document-view__crumb-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: "M19 12H5M12 19l-7-7 7-7" })), link.name));
     }
-    /** Filename + download button — part of the metadata column, not the preview
-     *  panel, so it stays next to the title/summary in the wide side-by-side layout. */
+    /** Filename + download button — the only file-related UI this component owns;
+     *  inline preview rendering is entirely the host's responsibility. */
     renderFileMeta(fileName, href) {
         return (h("div", { class: "mrd-document-view__file-meta" }, h("span", { class: "mrd-document-view__file-name" }, fileName), href && (h("button", { type: "button", class: "mrd-document-view__download", onClick: () => this.mrdDownload.emit({ href, fileName }) }, 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: "M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" })), t('download', this.locale)))));
     }
-    /** The preview panel itself (iframe/image/loading state) — its own grid
-     *  column in the wide layout, so it can take the full available height. */
-    renderPreviewPanel(fileName, href, mimeType) {
-        if (!href)
-            return null;
-        return (h("div", { class: "mrd-document-view__preview", style: { minHeight: `${this.previewHeight}px` } }, this.previewUrl ? (h("mrd-file-preview", { src: this.previewUrl, mimeType: mimeType, fileName: fileName, href: href, locale: this.locale, onMrdDownload: (e) => {
-                e.stopPropagation();
-                this.mrdDownload.emit(e.detail);
-            }, onMrdPreviewReload: (e) => {
-                e.stopPropagation();
-                this.mrdLoadPreview.emit({ href });
-            } })) : (h("div", { class: "mrd-document-view__preview-loading" }, t('loading', this.locale)))));
-    }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const titleRaw = this.slotValue('title');
         const title = titleRaw != null && titleRaw !== '' ? String(titleRaw) : null;
         const dateRaw = this.slotValue('date');
@@ -95,8 +81,7 @@ export class MrdDocumentView {
         const fileRaw = this.slotValue('file');
         const fileHref = (_a = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.href) !== null && _a !== void 0 ? _a : '';
         const fileName = (_b = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.fileName) !== null && _b !== void 0 ? _b : (fileRaw ? String(fileRaw) : '');
-        const mimeType = (_d = (_c = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.mimeType) !== null && _c !== void 0 ? _c : fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.contentType) !== null && _d !== void 0 ? _d : '';
-        return (h(Host, { key: '6023c8c6ca3d780fd4a9cca41189cb05a151221e' }, h("div", { key: 'd7d39d62964583da0ca6c1494e75321e6bab9ac8', class: "mrd-document-view" }, h("div", { key: '9aa14569c9ffc785ffb4f2b3d5930cf3e822e246', class: "mrd-document-view__body" }, h("div", { key: 'e00f3b55551429d8522fb97e7ccb43d56e98042d', class: "mrd-document-view__meta" }, this.renderContainer(), title && h("h1", { key: '9860273878b245fc757eb690c6cd7006b13045c4', class: "mrd-document-view__title" }, title), date && h("p", { key: '84c60b0b6feb6678d661000c26050e42eaaa8399', class: "mrd-document-view__date" }, date), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: 'd1cff0cc1b9376409c8e04a785deba93c986ba47', class: "mrd-document-view__summary" }, h("div", { key: 'fc9c4b986afc8c4f50486caf85bf58860d641a2b', class: "mrd-document-view__summary-body", innerHTML: summary })))), fileRaw && this.renderPreviewPanel(fileName, fileHref, mimeType)))));
+        return (h(Host, { key: 'e25995d61813ad0d285497c0abe74de0c1624cea' }, h("div", { key: '1d8e6c12c5db53bffd28b4bcff84a950c22cc8d8', class: "mrd-document-view" }, h("div", { key: 'b583648e524acd8156f92989b685b6343164738c', class: "mrd-document-view__body" }, h("div", { key: '8992b15a52edd64e2f0fd3269213302ab3989a20', class: "mrd-document-view__meta" }, this.renderContainer(), title && h("h1", { key: '0742816ed6ac927fa12410d723c9b0b8470800c7', class: "mrd-document-view__title" }, title), date && h("p", { key: '4803d2773ef904e3788a865db8e4653e5cb9d8df', class: "mrd-document-view__date" }, date), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: '502e9e844d474b692246e36c96245ba5321d2a9e', class: "mrd-document-view__summary" }, h("div", { key: 'b37d4c9cb9bc65c5abb0a4e1809e285032868e2c', class: "mrd-document-view__summary-body", innerHTML: summary }))))))));
     }
     static get is() { return "mrd-document-view"; }
     static get encapsulation() { return "scoped"; }
@@ -178,46 +163,6 @@ export class MrdDocumentView {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
-            },
-            "previewUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Signed URL for the file's inline preview (mrd-file-preview), resolved by\nthe host in response to mrdLoadPreview. Empty while unresolved \u2014 the\npreview area shows a loading state until the host injects a value."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "preview-url",
-                "defaultValue": "''"
-            },
-            "previewHeight": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum height (px) of the inline preview area \u2014 it stretches to fill the\navailable row height in the wide side-by-side layout (see mrd-document-view.scss),\nand falls back to this height when stacked. Overlay hosts typically pass a\nsmaller value than the full-page default to fit available chrome."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "preview-height",
-                "defaultValue": "640"
             }
         };
     }
@@ -253,19 +198,26 @@ export class MrdDocumentView {
                     "references": {}
                 }
             }, {
-                "method": "mrdLoadPreview",
-                "name": "mrdLoadPreview",
+                "method": "mrdAttachments",
+                "name": "mrdAttachments",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "The file slot has an href and needs a signed URL for inline preview.\nFired once on load and again whenever the file href changes (e.g. the\noverlay is reused for a different document via prev/next). Host resolves\nit and calls back with `previewUrl` \u2014 the same pattern as mrdLoadImage /\nsetImagePreview on mrd-layout-section."
+                    "text": "The file(s) belonging to this document, fired once on load and again\nwhenever the file slot's value changes (e.g. the overlay is reused for a\ndifferent document via prev/next). The host resolves the href(s) itself\nand decides whether/how to render them (e.g. pdf.js next to the layout) \u2014\nthis component does not fetch or preview the file."
                 },
                 "complexType": {
-                    "original": "{ href: string }",
-                    "resolved": "{ href: string; }",
-                    "references": {}
+                    "original": "{ attachments: DocumentAttachment[] }",
+                    "resolved": "{ attachments: DocumentAttachment[]; }",
+                    "references": {
+                        "DocumentAttachment": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::DocumentAttachment",
+                            "referenceLocation": "DocumentAttachment"
+                        }
+                    }
                 }
             }];
     }

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

@@ -7,7 +7,6 @@
   align-items: center;
   width: 100%;
 }
-
 .mrd-boolean-field__toggle-label {
   display: flex;
   align-items: center;
@@ -15,7 +14,6 @@
   cursor: pointer;
   user-select: none;
 }
-
 .mrd-boolean-field__checkbox {
   position: absolute;
   opacity: 0;
@@ -23,24 +21,19 @@
   height: 0;
   pointer-events: none;
 }
-
 .mrd-boolean-field__checkbox:checked + .mrd-boolean-field__toggle {
   background-color: var(--mrd-color-primary);
 }
-
 .mrd-boolean-field__checkbox:checked + .mrd-boolean-field__toggle::after {
   transform: translateX(20px);
 }
-
 .mrd-boolean-field__checkbox:focus + .mrd-boolean-field__toggle {
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-boolean-field__checkbox:disabled + .mrd-boolean-field__toggle {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
 .mrd-boolean-field__toggle {
   position: relative;
   display: inline-block;
@@ -51,7 +44,6 @@
   transition: background-color var(--mrd-transition);
   flex-shrink: 0;
 }
-
 .mrd-boolean-field__toggle::after {
   content: "";
   position: absolute;
@@ -64,13 +56,11 @@
   transition: transform var(--mrd-transition);
   box-shadow: var(--mrd-shadow-sm);
 }
-
 .mrd-boolean-field__text {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-boolean-field__text--required::after {
   content: " *";
   color: var(--mrd-color-danger);

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

@@ -8,7 +8,6 @@
   gap: var(--mrd-space-1);
   width: 100%;
 }
-
 .mrd-currency-field__label {
   display: block;
   font-family: var(--mrd-font-family);
@@ -20,13 +19,11 @@
   content: " *";
   color: var(--mrd-color-danger);
 }
-
 .mrd-currency-field__row {
   display: flex;
   gap: var(--mrd-space-2);
   align-items: stretch;
 }
-
 .mrd-currency-field__amount {
   display: block;
   width: 100%;
@@ -65,7 +62,6 @@
   flex: 1;
   text-align: right;
 }
-
 .mrd-currency-field__currency {
   width: 90px;
   height: var(--mrd-input-height);
@@ -83,18 +79,15 @@
   appearance: none;
   text-align: center;
 }
-
 .mrd-currency-field__currency:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-currency-field__currency:disabled {
   background-color: var(--mrd-input-bg-disabled);
   cursor: not-allowed;
   opacity: 0.7;
 }
-
 .mrd-currency-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);

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

@@ -55,7 +55,6 @@
 .mrd-file-field__zone {
   padding: var(--mrd-space-6);
 }
-
 .mrd-file-field__input {
   position: absolute;
   inset: 0;
@@ -65,7 +64,6 @@
   pointer-events: none;
   cursor: pointer;
 }
-
 .mrd-file-field__prompt {
   display: flex;
   flex-direction: column;
@@ -76,20 +74,16 @@
   color: var(--mrd-color-neutral-500);
   text-align: center;
 }
-
 .mrd-file-field__upload-icon {
   width: 32px;
   height: 32px;
   color: var(--mrd-color-neutral-400);
 }
-
 .mrd-file-field__browse {
   color: var(--mrd-color-primary);
   font-weight: var(--mrd-font-weight-medium);
   text-decoration: underline;
 }
-
-/* Selected file row */
 .mrd-file-field__selected {
   display: flex;
   align-items: center;
@@ -98,14 +92,12 @@
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-700);
 }
-
 .mrd-file-field__icon {
   width: 20px;
   height: 20px;
   color: var(--mrd-color-primary);
   flex-shrink: 0;
 }
-
 .mrd-file-field__filename {
   flex: 1;
   overflow: hidden;
@@ -113,7 +105,6 @@
   white-space: nowrap;
   max-width: 200px;
 }
-
 .mrd-file-field__clear {
   background: none;
   border: none;
@@ -124,12 +115,10 @@
   border-radius: var(--mrd-border-radius-sm);
   line-height: 1;
 }
-
 .mrd-file-field__clear:hover {
   color: var(--mrd-color-danger);
   background-color: var(--mrd-color-danger-light);
 }
-
 .mrd-file-field__spinner {
   display: inline-block;
   width: 18px;

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

@@ -62,7 +62,6 @@
 .mrd-hyperlink-field__input--name {
   margin-top: var(--mrd-space-1);
 }
-
 .mrd-hyperlink-field__link {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);
@@ -70,11 +69,9 @@
   text-decoration: underline;
   word-break: break-all;
 }
-
 .mrd-hyperlink-field__link:hover {
   opacity: 0.8;
 }
-
 .mrd-hyperlink-field__empty {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);

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

@@ -52,7 +52,6 @@
   border-color: var(--mrd-border-color);
   background-color: var(--mrd-color-neutral-50);
 }
-
 .mrd-image-field__input {
   position: absolute;
   inset: 0;
@@ -61,7 +60,6 @@
   height: 100%;
   pointer-events: none;
 }
-
 .mrd-image-field__prompt {
   display: flex;
   flex-direction: column;
@@ -73,20 +71,16 @@
   color: var(--mrd-color-neutral-500);
   text-align: center;
 }
-
 .mrd-image-field__upload-icon {
   width: 40px;
   height: 40px;
   color: var(--mrd-color-neutral-400);
 }
-
 .mrd-image-field__browse {
   color: var(--mrd-color-primary);
   font-weight: var(--mrd-font-weight-medium);
   text-decoration: underline;
 }
-
-/* Preview: thumbnail + bestandsnaam + verwijder knop */
 .mrd-image-field__preview-container {
   display: flex;
   align-items: center;
@@ -94,7 +88,6 @@
   padding: var(--mrd-space-4);
   width: 100%;
 }
-
 .mrd-image-field__preview-thumb {
   flex-shrink: 0;
   width: 80px;
@@ -104,14 +97,12 @@
   border: var(--mrd-border-width) solid var(--mrd-border-color);
   background-color: var(--mrd-color-neutral-100);
 }
-
 .mrd-image-field__preview {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
-
 .mrd-image-field__preview-info {
   flex: 1;
   min-width: 0;
@@ -119,7 +110,6 @@
   flex-direction: column;
   gap: var(--mrd-space-1);
 }
-
 .mrd-image-field__preview-name {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-sm);
@@ -129,7 +119,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 .mrd-image-field__preview-overlay {
   position: absolute;
   inset: 0;
@@ -139,7 +128,6 @@
   justify-content: center;
   border-radius: var(--mrd-border-radius);
 }
-
 .mrd-image-field__spinner {
   display: inline-block;
   width: 24px;
@@ -149,18 +137,11 @@
   border-radius: 50%;
   animation: mrd-spin 0.6s linear infinite;
 }
-
-@keyframes mrd-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
 .mrd-image-field__upload-status {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-500);
 }
-
 .mrd-image-field__clear {
   flex-shrink: 0;
   background-color: var(--mrd-color-white);
@@ -174,8 +155,13 @@
   cursor: pointer;
   transition: background-color var(--mrd-transition), color var(--mrd-transition);
 }
-
 .mrd-image-field__clear:hover {
   background-color: var(--mrd-color-danger);
   color: var(--mrd-color-white);
+}
+
+@keyframes mrd-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

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

@@ -75,11 +75,9 @@
   border-radius: var(--mrd-border-radius);
   background-color: var(--mrd-input-bg);
 }
-
 .mrd-list-field__checkbox-list--error {
   border-color: var(--mrd-border-color-error);
 }
-
 .mrd-list-field__checkbox-item {
   display: flex;
   align-items: center;
@@ -89,14 +87,12 @@
   color: var(--mrd-input-color);
   cursor: pointer;
 }
-
 .mrd-list-field__checkbox-item input[type=checkbox] {
   width: 1rem;
   height: 1rem;
   cursor: pointer;
   accent-color: var(--mrd-color-primary);
 }
-
 .mrd-list-field__color-dot {
   display: inline-block;
   width: 12px;

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

@@ -65,7 +65,6 @@
   resize: vertical;
   line-height: 1.5;
 }
-
 .mrd-longtext-field__content {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);