@mmlogic/components 0.4.2 → 0.5.0

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

@@ -8,7 +8,6 @@
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-layout-section__field {
   display: grid;
   grid-template-columns: 200px 1fr;
@@ -16,14 +15,15 @@
   gap: 0 var(--mrd-space-2);
   padding: var(--mrd-space-1) 0;
 }
-
+.mrd-layout-section__field--block {
+  grid-template-columns: 1fr;
+}
 .mrd-layout-section__field-label {
   font-size: var(--mrd-font-size-xs);
   font-weight: var(--mrd-font-weight-normal);
   color: var(--mrd-color-neutral-500);
   padding-top: 1px;
 }
-
 .mrd-layout-section__field-value {
   font-size: var(--mrd-font-size-sm);
   font-weight: var(--mrd-font-weight-medium);
@@ -33,13 +33,11 @@
   align-items: center;
   gap: var(--mrd-space-1);
 }
-
 .mrd-layout-section__history-wrap {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
-
 .mrd-layout-section__history-btn {
   display: inline-flex;
   align-items: center;
@@ -55,22 +53,18 @@
   flex-shrink: 0;
   transition: color var(--mrd-transition-fast), background-color var(--mrd-transition-fast);
 }
-
 .mrd-layout-section__history-btn:hover {
   color: var(--mrd-color-neutral-700);
   background-color: var(--mrd-color-neutral-100);
 }
-
 .mrd-layout-section__history-btn:focus {
   outline: none;
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-layout-section__history-icon {
   width: 0.875rem;
   height: 0.875rem;
 }
-
 .mrd-layout-section__history-popover {
   position: absolute;
   top: calc(100% + 0.25rem);
@@ -84,7 +78,6 @@
   padding: var(--mrd-space-1) 0;
   z-index: var(--mrd-z-dropdown);
 }
-
 .mrd-layout-section__history-entry {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-sm);
@@ -93,11 +86,9 @@
   padding: var(--mrd-space-2) var(--mrd-space-3);
   line-height: var(--mrd-line-height-normal);
 }
-
 .mrd-layout-section__history-entry:not(:last-child) {
   border-bottom: var(--mrd-border-width) solid var(--mrd-color-neutral-100);
 }
-
 .mrd-layout-section__field-header {
   font-size: var(--mrd-font-size-2xl);
   font-weight: var(--mrd-font-weight-bold);
@@ -105,7 +96,6 @@
   margin: 0 0 var(--mrd-space-4) 0;
   padding: 0;
 }
-
 .mrd-layout-section__header {
   font-size: var(--mrd-font-size-xl);
   font-weight: var(--mrd-font-weight-semibold);
@@ -113,14 +103,12 @@
   margin: var(--mrd-space-4) 0 var(--mrd-space-2) 0;
   padding: 0;
 }
-
 .mrd-layout-section__text {
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-color-neutral-700);
   line-height: var(--mrd-line-height-relaxed);
   margin: var(--mrd-space-2) 0;
 }
-
 .mrd-layout-section__navigate {
   display: inline-flex;
   align-items: center;
@@ -135,21 +123,17 @@
   cursor: pointer;
   margin: var(--mrd-space-2) 0;
 }
-
 .mrd-layout-section__navigate:hover {
   background-color: var(--mrd-color-primary-light);
   border-color: var(--mrd-color-primary);
 }
-
 .mrd-layout-section__link {
   color: var(--mrd-color-primary);
   text-decoration: none;
 }
-
 .mrd-layout-section__link:hover {
   text-decoration: underline;
 }
-
 .mrd-layout-section__relation-link {
   background: none;
   border: none;
@@ -161,11 +145,9 @@
   cursor: pointer;
   text-align: left;
 }
-
 .mrd-layout-section__relation-link:hover {
   text-decoration: underline;
 }
-
 .mrd-layout-section__download-link {
   display: inline-flex;
   align-items: center;
@@ -179,31 +161,22 @@
   cursor: pointer;
   text-align: left;
 }
-
 .mrd-layout-section__download-link:hover {
   text-decoration: underline;
   color: var(--mrd-color-primary-dark);
 }
-
 .mrd-layout-section__file-icon {
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
 }
-
 .mrd-layout-section__boolean--true {
   color: var(--mrd-color-success);
   font-weight: var(--mrd-font-weight-semibold);
 }
-
 .mrd-layout-section__boolean--false {
   color: var(--mrd-color-neutral-400);
 }
-
-.mrd-layout-section__field--block {
-  grid-template-columns: 1fr;
-}
-
 .mrd-layout-section__badge {
   display: inline-block;
   font-size: var(--mrd-font-size-xs);
@@ -211,13 +184,11 @@
   padding: 2px var(--mrd-space-3);
   border-radius: 10px;
 }
-
 .mrd-layout-section__badge-dot-row {
   display: inline-flex;
   align-items: center;
   gap: var(--mrd-space-2);
 }
-
 .mrd-layout-section__badge-dot {
   display: inline-block;
   width: 10px;
@@ -225,7 +196,6 @@
   border-radius: 50%;
   flex-shrink: 0;
 }
-
 .mrd-layout-section__secret-masked {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);
@@ -234,7 +204,6 @@
   user-select: none;
   pointer-events: none;
 }
-
 .mrd-layout-section__pre {
   font-family: var(--mrd-font-family-mono);
   font-size: var(--mrd-font-size-xs);
@@ -249,11 +218,9 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
-
 .mrd-layout-section__group {
   margin: var(--mrd-space-4) 0;
 }
-
 .mrd-layout-section__group-title {
   font-size: var(--mrd-font-size-xs);
   font-weight: var(--mrd-font-weight-semibold);
@@ -262,27 +229,22 @@
   padding-bottom: 0;
   letter-spacing: 0.01em;
 }
-
 .mrd-layout-section__related-view {
   margin: var(--mrd-space-4) 0;
 }
-
 .mrd-layout-section__related-view-title {
   font-size: var(--mrd-font-size-lg);
   font-weight: var(--mrd-font-weight-semibold);
   color: var(--mrd-color-neutral-800);
   margin: 0 0 var(--mrd-space-3) 0;
 }
-
 .mrd-layout-section__search {
   position: relative;
   margin: var(--mrd-space-2) 0;
 }
-
 .mrd-layout-section__search-wrap {
   position: relative;
 }
-
 .mrd-layout-section__search-icon {
   position: absolute;
   left: var(--mrd-input-padding-x);
@@ -293,7 +255,6 @@
   color: var(--mrd-color-neutral-400);
   pointer-events: none;
 }
-
 .mrd-layout-section__search-input {
   display: block;
   width: 100%;
@@ -309,16 +270,13 @@
   appearance: none;
   box-sizing: border-box;
 }
-
 .mrd-layout-section__search-input:focus {
   border-color: var(--mrd-border-color-focus);
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-layout-section__search-input::placeholder {
   color: var(--mrd-input-placeholder-color);
 }
-
 .mrd-layout-section__search-results {
   position: absolute;
   top: 100%;
@@ -336,12 +294,10 @@
   margin: 0;
   padding: var(--mrd-space-1) 0;
 }
-
 .mrd-layout-section__search-result {
   margin: 0;
   padding: 0;
 }
-
 .mrd-layout-section__search-result-btn {
   display: flex;
   flex-direction: column;
@@ -353,23 +309,19 @@
   cursor: pointer;
   font-family: var(--mrd-font-family);
 }
-
 .mrd-layout-section__search-result-btn:hover {
   background-color: var(--mrd-color-primary-light);
 }
-
 .mrd-layout-section__search-result-label {
   font-size: var(--mrd-font-size-sm);
   font-weight: var(--mrd-font-weight-medium);
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-layout-section__search-result-desc {
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-500);
   margin-top: var(--mrd-space-1);
 }
-
 .mrd-layout-section__image-thumb-btn {
   background: none;
   border: none;
@@ -380,11 +332,9 @@
   overflow: hidden;
   line-height: 0;
 }
-
 .mrd-layout-section__image-thumb-btn:hover .mrd-layout-section__image-thumb {
   opacity: 0.85;
 }
-
 .mrd-layout-section__image-thumb {
   display: block;
   max-width: 160px;
@@ -393,7 +343,6 @@
   object-fit: cover;
   transition: opacity 0.15s;
 }
-
 .mrd-layout-section__modal-backdrop {
   position: fixed;
   inset: 0;
@@ -403,7 +352,6 @@
   align-items: center;
   justify-content: center;
 }
-
 .mrd-layout-section__modal {
   position: relative;
   background: var(--mrd-color-white);
@@ -416,7 +364,6 @@
   justify-content: center;
   box-shadow: var(--mrd-shadow-lg);
 }
-
 .mrd-layout-section__modal-close {
   position: absolute;
   top: var(--mrd-space-2);
@@ -435,11 +382,9 @@
   line-height: 1;
   z-index: 1;
 }
-
 .mrd-layout-section__modal-close:hover {
   background: rgba(0, 0, 0, 0.8);
 }
-
 .mrd-layout-section__modal-image {
   display: block;
   max-width: 100%;

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

@@ -16,17 +16,11 @@ export class MrdLayoutSection {
         /** Top-level archetypes on the object dashboard. When it contains commons.document,
          *  the record is rendered as a single-document view instead of generic fields. */
         this.archetypes = [];
-        /** Minimum height (px) of the commons.document inline file preview — it
-         *  stretches taller in the wide side-by-side layout. Pass a smaller value
-         *  when embedding the record in an overlay with limited height. */
-        this.documentPreviewHeight = 640;
         this.searchQueryMap = {};
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
         this.imagePreviews = {};
         this.openHistoryField = null;
-        /** Signed URL for the commons.document archetype's inline file preview. */
-        this.documentPreviewUrl = null;
         this.historyClickOutside = null;
         this.searchTimers = {};
         this.handleViewLoadPage = (e, name) => {
@@ -150,11 +144,6 @@ export class MrdLayoutSection {
     async openImagePreview(url) {
         this.imagePreviewUrl = url;
     }
-    /** Provide a resolved signed URL for the commons.document archetype's inline
-     *  file preview, in response to mrdLoadDocumentPreview. */
-    async setDocumentPreviewUrl(url) {
-        this.documentPreviewUrl = url;
-    }
     resolveSearchKey() {
         var _a;
         const items = flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
@@ -273,11 +262,12 @@ export class MrdLayoutSection {
             }, onMrdRowClick: (e) => {
                 var _a, _b, _c, _d;
                 e.stopPropagation();
-                const row = e.detail;
+                const { row, listContext } = e.detail;
                 this.mrdNavigate.emit({
                     href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href,
                     label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '',
                     navigateBehaviour: (_d = item.navigateBehaviour) !== null && _d !== void 0 ? _d : ClientLayoutNavigateBehaviour.PAGE,
+                    listContext,
                 });
             }, onMrdAction: (e) => {
                 var _a;
@@ -327,18 +317,17 @@ export class MrdLayoutSection {
      *  a recognisable document instead of generic fields, keeping any related views/
      *  searches below it. */
     renderDocumentObject(archetype) {
-        var _a;
         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, previewUrl: (_a = this.documentPreviewUrl) !== null && _a !== void 0 ? _a : '', previewHeight: this.documentPreviewHeight, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdLoadPreview: (e) => { e.stopPropagation(); this.mrdLoadDocumentPreview.emit(e.detail); } }),
+            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)),
         ];
     }
     render() {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
-        return (h(Host, { key: 'd73b44ed5d3529c5b01a87ddfd9a7ebe202ff3b8' }, h("div", { key: '1e80e202ec7c23afbca8f6a02376f0a4a4a6ba31', class: "mrd-layout-section" }, docArchetype
+        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()));
     }
@@ -500,26 +489,6 @@ export class MrdLayoutSection {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
-            },
-            "documentPreviewHeight": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum height (px) of the commons.document inline file preview \u2014 it\nstretches taller in the wide side-by-side layout. Pass a smaller value\nwhen embedding the record in an overlay with limited height."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "document-preview-height",
-                "defaultValue": "640"
             }
         };
     }
@@ -529,8 +498,7 @@ export class MrdLayoutSection {
             "searchResultsMap": {},
             "imagePreviewUrl": {},
             "imagePreviews": {},
-            "openHistoryField": {},
-            "documentPreviewUrl": {}
+            "openHistoryField": {}
         };
     }
     static get events() {
@@ -542,11 +510,11 @@ export class MrdLayoutSection {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`attachments`, when present, prefetches the clicked document row's file slot\n(see TASK-0169 / FINDING-0111) so the host can render a preview immediately,\nwithout waiting for the navigated-to page's own mrdAttachments. Only set for\ncommons.document rows opened from an embedded document view."
                 },
                 "complexType": {
-                    "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate; navigateBehaviour?: ClientLayoutNavigateBehaviour }",
-                    "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; }",
+                    "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate; navigateBehaviour?: ClientLayoutNavigateBehaviour; listContext?: ListNavigationContext; attachments?: DocumentAttachment[] }",
+                    "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; listContext?: ListNavigationContext | undefined; attachments?: DocumentAttachment[] | undefined; }",
                     "references": {
                         "ClientLayoutItemNavigate": {
                             "location": "import",
@@ -559,6 +527,18 @@ export class MrdLayoutSection {
                             "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientLayoutNavigateBehaviour",
                             "referenceLocation": "ClientLayoutNavigateBehaviour"
+                        },
+                        "ListNavigationContext": {
+                            "location": "import",
+                            "path": "../../../utils/query-params",
+                            "id": "src/utils/query-params.ts::ListNavigationContext",
+                            "referenceLocation": "ListNavigationContext"
+                        },
+                        "DocumentAttachment": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::DocumentAttachment",
+                            "referenceLocation": "DocumentAttachment"
                         }
                     }
                 }
@@ -623,19 +603,26 @@ export class MrdLayoutSection {
                     "references": {}
                 }
             }, {
-                "method": "mrdLoadDocumentPreview",
-                "name": "mrdLoadDocumentPreview",
+                "method": "mrdAttachments",
+                "name": "mrdAttachments",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Re-emitted from an embedded mrd-document-view's mrdLoadPreview (commons.document\nsingle-object view); host resolves the file href to a signed URL and calls\nsetDocumentPreviewUrl()."
+                    "text": "Re-emitted from an embedded mrd-document-view (commons.document single-object\nview) whenever its file slot's value changes. The component never renders the\nfile itself \u2014 the host resolves the href(s) and decides how/whether to show\nthem, e.g. in a panel next to this mrd-layout-section."
                 },
                 "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"
+                        }
+                    }
                 }
             }, {
                 "method": "mrdViewAction",
@@ -997,27 +984,6 @@ export class MrdLayoutSection {
                     "text": "Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field).",
                     "tags": []
                 }
-            },
-            "setDocumentPreviewUrl": {
-                "complexType": {
-                    "signature": "(url: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "url",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Provide a resolved signed URL for the commons.document archetype's inline\nfile preview, in response to mrdLoadDocumentPreview.",
-                    "tags": []
-                }
             }
         };
     }