@mmlogic/components 0.4.1 → 0.4.2

package/dist/mosterdcomponents/validation-DbEViuiw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-DbEViuiw.js","sources":["src/utils/validation.ts"],"sourcesContent":["import { ClientLayoutItemFieldDataType } from '../types';\n\nexport function validateRequired(value: unknown): boolean {\n  if (value === null || value === undefined) return false;\n  if (typeof value === 'string') return value.trim().length > 0;\n  if (Array.isArray(value)) return value.length > 0;\n  if (typeof value === 'object') {\n    // HyperlinkValue check\n    const hv = value as { href?: unknown };\n    if ('href' in hv) return typeof hv.href === 'string' && hv.href.trim().length > 0;\n    // CurrencyValue check\n    const cv = value as { amount?: unknown };\n    if ('amount' in cv) return cv.amount !== null && cv.amount !== undefined && cv.amount !== '';\n  }\n  return true;\n}\n\nexport function validateEmail(value: string): boolean {\n  if (!value) return true;\n  return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value);\n}\n\nexport function validateUrl(value: string): boolean {\n  if (!value) return true;\n  try {\n    const url = new URL(value);\n    return url.protocol === 'http:' || url.protocol === 'https:';\n  } catch {\n    return false;\n  }\n}\n\nexport function validateNumber(value: unknown, dataType: ClientLayoutItemFieldDataType): boolean {\n  if (value === null || value === undefined || value === '') return true;\n  const num = Number(value);\n  if (isNaN(num)) return false;\n  if (dataType === ClientLayoutItemFieldDataType.INTEGER) {\n    return Number.isInteger(num);\n  }\n  if (dataType === ClientLayoutItemFieldDataType.PERCENTAGE) {\n    return num >= 0 && num <= 100;\n  }\n  return true;\n}\n"],"names":[],"mappings":";;;AAEM,SAAU,gBAAgB,CAAC,KAAc,EAAA;AAC7C,IAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,OAAO,KAAK;IACvD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;AAC7D,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC;AACjD,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;;QAE7B,MAAM,EAAE,GAAG,KAA2B;QACtC,IAAI,MAAM,IAAI,EAAE;AAAE,YAAA,OAAO,OAAO,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;;QAEjF,MAAM,EAAE,GAAG,KAA6B;QACxC,IAAI,QAAQ,IAAI,EAAE;AAAE,YAAA,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,IAAI,EAAE,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,CAAC,MAAM,KAAK,EAAE;;AAE9F,IAAA,OAAO,IAAI;AACb;AAEM,SAAU,aAAa,CAAC,KAAa,EAAA;AACzC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;AACvB,IAAA,OAAO,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC;AACjD;AAEM,SAAU,WAAW,CAAC,KAAa,EAAA;AACvC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;AACvB,IAAA,IAAI;AACF,QAAA,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC;QAC1B,OAAO,GAAG,CAAC,QAAQ,KAAK,OAAO,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ;;IAC5D,OAAA,EAAA,EAAM;AACN,QAAA,OAAO,KAAK;;AAEhB;AAEM,SAAU,cAAc,CAAC,KAAc,EAAE,QAAuC,EAAA;IACpF,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE;AAAE,QAAA,OAAO,IAAI;AACtE,IAAA,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC;IACzB,IAAI,KAAK,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,KAAK;AAC5B,IAAA,IAAI,QAAQ,KAAK,6BAA6B,CAAC,OAAO,EAAE;AACtD,QAAA,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC;;AAE9B,IAAA,IAAI,QAAQ,KAAK,6BAA6B,CAAC,UAAU,EAAE;AACzD,QAAA,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG;;AAE/B,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/types/components/documents/mrd-document-container/mrd-document-container.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClientArchetype, ClientLayoutItem } from '../../../types/client-layout';
+import { ClientArchetype, ClientLayoutItem, ClientLayoutNavigateBehaviour } from '../../../types/client-layout';
 /**
  * Owns a document collection view: a single toolbar (view switch + collection
  * actions like "New folder", and — later — upload / drag-drop) plus the two
@@ -49,10 +49,14 @@ export declare class MrdDocumentContainer {
         qs: string;
         aggQs: string;
     }>;
-    /** A row / document was activated. Host routes to the object page. */
+    /** A row / document was activated. Host routes to the object page. Documents
+     *  are always the "quick look" use case, so navigateBehaviour is hardcoded
+     *  to OVERLAY_PAGE here — unlike the generic VIEW/RELATED_VIEW table path in
+     *  mrd-layout-section, which takes it from the item's configuration. */
     mrdNavigate: EventEmitter<{
         href?: string;
         label: string;
+        navigateBehaviour?: ClientLayoutNavigateBehaviour;
     }>;
     /** A table toolbar action was triggered. */
     mrdAction: EventEmitter<{

package/dist/types/components/documents/mrd-document-view/mrd-document-view.d.ts

@@ -16,6 +16,15 @@ export declare class MrdDocumentView {
     /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
     data: Record<string, unknown>;
     locale: string;
+    /** 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. */
+    previewUrl: string;
+    /** 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. */
+    previewHeight: number;
     /** Navigate to the container (dossier). Host resolves the href and routes. */
     mrdNavigate: EventEmitter<{
         href?: string;
@@ -26,11 +35,30 @@ export declare class MrdDocumentView {
         href: string;
         fileName: string;
     }>;
+    /** The file slot has an href and needs a signed URL for inline preview.
+     *  Fired once on load and again whenever the file href changes (e.g. the
+     *  overlay is reused for a different document via prev/next). Host resolves
+     *  it and calls back with `previewUrl` — the same pattern as mrdLoadImage /
+     *  setImagePreview on mrd-layout-section. */
+    mrdLoadPreview: EventEmitter<{
+        href: string;
+    }>;
+    /** Tracks the href a preview was last requested for, so componentDidLoad and
+     *  the data watcher don't emit duplicate requests for the same file. */
+    private lastPreviewHref;
+    componentDidLoad(): void;
+    dataChanged(): void;
+    private requestPreviewIfNeeded;
     /** Value of a value-slot: reads data[field] via the slot→field map. */
     private slotValue;
     /** Relation link for a relation-slot: reads data._links[field]. */
     private slotLink;
     private renderContainer;
-    private renderFile;
+    /** 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. */
+    private renderFileMeta;
+    /** The preview panel itself (iframe/image/loading state) — its own grid
+     *  column in the wide layout, so it can take the full available height. */
+    private renderPreviewPanel;
     render(): any;
 }

package/dist/types/components/documents/mrd-file-preview/file-preview-kind.d.ts

@@ -0,0 +1,9 @@
+/** Pure classification logic for mrd-file-preview — no Stencil dependency. */
+export type FilePreviewKind = 'pdf' | 'image' | 'unsupported';
+/**
+ * Decide how to render a file given its declared mime type and/or file name.
+ * A declared mime type is authoritative when present (a mismatched file name
+ * extension is ignored); the file name extension is only consulted as a
+ * fallback when no mime type is known.
+ */
+export declare function detectPreviewKind(mimeType?: string | null, fileName?: string | null): FilePreviewKind;

package/dist/types/components/documents/mrd-file-preview/mrd-file-preview.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Renders a signed URL inline as a PDF (native browser viewer, via `<iframe>`)
+ * or an image (`<img>`), picked from `mimeType`/`fileName`. Purely
+ * presentational: the signed URL is used directly as element `src` — a
+ * navigation, not a fetch/XHR, so no CORS handling is needed here. Fetching
+ * the signed URL itself is the host's responsibility, same as `mrdLoadImage` /
+ * `setImagePreview` on mrd-layout-section.
+ */
+export declare class MrdFilePreview {
+    /** Signed URL to render. */
+    src: string;
+    /** Declared mime type (e.g. 'application/pdf', 'image/png'), when known.
+     *  Authoritative over `fileName` when present. */
+    mimeType: string;
+    /** Original file name — used for extension-based detection when `mimeType`
+     *  is absent, and as alt/title text. */
+    fileName: string;
+    /** The file's own reference href (not the signed preview URL in `src`).
+     *  When set, an unsupported type falls back to the same download button
+     *  used elsewhere in the library, so hosts need no new wiring. */
+    href: string;
+    locale: string;
+    /** The image failed to load — most likely an expired signed URL. Host
+     *  should fetch a fresh signed URL and update `src`.
+     *  Note: this is only raised for images. Browsers don't reliably surface
+     *  HTTP-level failures (e.g. a 403 on an expired URL) through an iframe's
+     *  load/error events, so the same detection isn't available for PDFs. */
+    mrdPreviewReload: EventEmitter<void>;
+    /** Download the file. Same shape as mrd-document-view / mrd-layout-section's
+     *  mrdDownload — host resolves `href` to a signed URL. */
+    mrdDownload: EventEmitter<{
+        href: string;
+        fileName: string;
+    }>;
+    private imageFailed;
+    srcChanged(): void;
+    private onImageError;
+    private retry;
+    render(): any;
+}

package/dist/types/components/layout/mrd-layout-section/mrd-layout-section.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClientLayoutItem, ClientLayoutItemNavigate, ClientViewMetadata, ClientArchetype, RelationSearchResult } from '../../../types/client-layout';
+import { ClientLayoutItem, ClientLayoutItemNavigate, ClientLayoutNavigateBehaviour, ClientViewMetadata, ClientArchetype, RelationSearchResult } from '../../../types/client-layout';
 import { DistinctValue } from '../../documents/mrd-document-list/folder-tree';
 export declare class MrdLayoutSection {
     el: HTMLElement;
@@ -17,16 +17,23 @@ export declare 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. */
     archetypes: ClientArchetype[];
+    /** 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. */
+    documentPreviewHeight: number;
     private searchQueryMap;
     private searchResultsMap;
     private imagePreviewUrl;
     private imagePreviews;
     private openHistoryField;
+    /** Signed URL for the commons.document archetype's inline file preview. */
+    private documentPreviewUrl;
     private historyClickOutside;
     mrdNavigate: EventEmitter<{
         href?: string;
         label: string;
         navigate?: ClientLayoutItemNavigate;
+        navigateBehaviour?: ClientLayoutNavigateBehaviour;
     }>;
     mrdSearch: EventEmitter<{
         query: string;
@@ -51,6 +58,12 @@ export declare class MrdLayoutSection {
         fieldName: string;
         href: string;
     }>;
+    /** Re-emitted from an embedded mrd-document-view's mrdLoadPreview (commons.document
+     *  single-object view); host resolves the file href to a signed URL and calls
+     *  setDocumentPreviewUrl(). */
+    mrdLoadDocumentPreview: EventEmitter<{
+        href: string;
+    }>;
     /** Re-emitted from an embedded mrd-table's mrdAction; host builds the target URL from dataClass. */
     mrdViewAction: EventEmitter<{
         name: string;
@@ -125,6 +138,9 @@ export declare class MrdLayoutSection {
     setImagePreview(fieldName: string, url: string): Promise<void>;
     /** Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field). */
     openImagePreview(url: string): Promise<void>;
+    /** Provide a resolved signed URL for the commons.document archetype's inline
+     *  file preview, in response to mrdLoadDocumentPreview. */
+    setDocumentPreviewUrl(url: string): Promise<void>;
     private resolveSearchKey;
     private handleViewLoadPage;
     private handleSearchInput;

package/dist/types/components.d.ts

@@ -6,10 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ClientLayout, ClientLayoutItem as ClientLayoutItem1, ClientLayoutItemFieldDataType, ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior, ClientListValue, CurrencyValue, RelationSearchResult } from "./types";
-import { AggregationResult, ClientArchetype, ClientLayoutItem, ClientLayoutItemNavigate, ClientViewMetadata, HyperlinkValue, RelationSearchResult as RelationSearchResult1 } from "./types/client-layout";
+import { AggregationResult, ClientArchetype, ClientLayoutItem, ClientLayoutItemNavigate, ClientLayoutNavigateBehaviour, ClientViewMetadata, HyperlinkValue, RelationSearchResult as RelationSearchResult1 } from "./types/client-layout";
 import { DistinctValue, DocRow } from "./components/documents/mrd-document-list/folder-tree";
 export { ClientLayout, ClientLayoutItem as ClientLayoutItem1, ClientLayoutItemFieldDataType, ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior, ClientListValue, CurrencyValue, RelationSearchResult } from "./types";
-export { AggregationResult, ClientArchetype, ClientLayoutItem, ClientLayoutItemNavigate, ClientViewMetadata, HyperlinkValue, RelationSearchResult as RelationSearchResult1 } from "./types/client-layout";
+export { AggregationResult, ClientArchetype, ClientLayoutItem, ClientLayoutItemNavigate, ClientLayoutNavigateBehaviour, ClientViewMetadata, HyperlinkValue, RelationSearchResult as RelationSearchResult1 } from "./types/client-layout";
 export { DistinctValue, DocRow } from "./components/documents/mrd-document-list/folder-tree";
 export namespace Components {
     interface MrdBooleanField {
@@ -245,6 +245,16 @@ export namespace Components {
           * @default navigator.language
          */
         "locale": string;
+        /**
+          * 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.
+          * @default 640
+         */
+        "previewHeight": number;
+        /**
+          * 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.
+          * @default ''
+         */
+        "previewUrl": string;
     }
     interface MrdEmailField {
         /**
@@ -318,6 +328,40 @@ export namespace Components {
          */
         "value": unknown;
     }
+    /**
+     * Renders a signed URL inline as a PDF (native browser viewer, via `<iframe>`)
+     * or an image (`<img>`), picked from `mimeType`/`fileName`. Purely
+     * presentational: the signed URL is used directly as element `src` — a
+     * navigation, not a fetch/XHR, so no CORS handling is needed here. Fetching
+     * the signed URL itself is the host's responsibility, same as `mrdLoadImage` /
+     * `setImagePreview` on mrd-layout-section.
+     */
+    interface MrdFilePreview {
+        /**
+          * Original file name — used for extension-based detection when `mimeType` is absent, and as alt/title text.
+          * @default ''
+         */
+        "fileName": string;
+        /**
+          * The file's own reference href (not the signed preview URL in `src`). When set, an unsupported type falls back to the same download button used elsewhere in the library, so hosts need no new wiring.
+          * @default ''
+         */
+        "href": string;
+        /**
+          * @default navigator.language
+         */
+        "locale": string;
+        /**
+          * Declared mime type (e.g. 'application/pdf', 'image/png'), when known. Authoritative over `fileName` when present.
+          * @default ''
+         */
+        "mimeType": string;
+        /**
+          * Signed URL to render.
+          * @default ''
+         */
+        "src": string;
+    }
     interface MrdForm {
         "layout": ClientLayout;
         /**
@@ -425,6 +469,11 @@ export namespace Components {
           * @default {}
          */
         "data": Record<string, unknown>;
+        /**
+          * 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.
+          * @default 640
+         */
+        "documentPreviewHeight": number;
         /**
           * Items from one layout entry in ClientDashboardMetadata.layouts[].
           * @default []
@@ -443,6 +492,10 @@ export namespace Components {
           * Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field).
          */
         "openImagePreview": (url: string) => Promise<void>;
+        /**
+          * Provide a resolved signed URL for the commons.document archetype's inline file preview, in response to mrdLoadDocumentPreview.
+         */
+        "setDocumentPreviewUrl": (url: string) => Promise<void>;
         /**
           * Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox.
          */
@@ -848,6 +901,10 @@ export interface MrdFileFieldCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMrdFileFieldElement;
 }
+export interface MrdFilePreviewCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMrdFilePreviewElement;
+}
 export interface MrdFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMrdFormElement;
@@ -977,7 +1034,7 @@ declare global {
         "mrdLoadPage": { page: number; sort: string; path: string; qs: string; nodeId?: string };
         "mrdLoadDistinct": { nodeId: string; distinct: string; path: string; qs: string };
         "mrdLoadAggregations": { path: string; qs: string; aggQs: string };
-        "mrdNavigate": { href?: string; label: string };
+        "mrdNavigate": { href?: string; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour };
         "mrdAction": { action: string; path?: string; qs?: string; parentPath?: string | null; basicType?: string };
         "mrdUpdateObject": { href: string; values: Record<string, unknown> };
         "mrdUpload": { file: File };
@@ -1049,6 +1106,7 @@ declare global {
     interface HTMLMrdDocumentViewElementEventMap {
         "mrdNavigate": { href?: string; label: string };
         "mrdDownload": { href: string; fileName: string };
+        "mrdLoadPreview": { href: string };
     }
     /**
      * Archetype-driven single-document view. Given a `commons.document` binding and a
@@ -1131,6 +1189,32 @@ declare global {
         prototype: HTMLMrdFileFieldElement;
         new (): HTMLMrdFileFieldElement;
     };
+    interface HTMLMrdFilePreviewElementEventMap {
+        "mrdPreviewReload": void;
+        "mrdDownload": { href: string; fileName: string };
+    }
+    /**
+     * Renders a signed URL inline as a PDF (native browser viewer, via `<iframe>`)
+     * or an image (`<img>`), picked from `mimeType`/`fileName`. Purely
+     * presentational: the signed URL is used directly as element `src` — a
+     * navigation, not a fetch/XHR, so no CORS handling is needed here. Fetching
+     * the signed URL itself is the host's responsibility, same as `mrdLoadImage` /
+     * `setImagePreview` on mrd-layout-section.
+     */
+    interface HTMLMrdFilePreviewElement extends Components.MrdFilePreview, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLMrdFilePreviewElementEventMap>(type: K, listener: (this: HTMLMrdFilePreviewElement, ev: MrdFilePreviewCustomEvent<HTMLMrdFilePreviewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLMrdFilePreviewElementEventMap>(type: K, listener: (this: HTMLMrdFilePreviewElement, ev: MrdFilePreviewCustomEvent<HTMLMrdFilePreviewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLMrdFilePreviewElement: {
+        prototype: HTMLMrdFilePreviewElement;
+        new (): HTMLMrdFilePreviewElement;
+    };
     interface HTMLMrdFormElementEventMap {
         "mrdSubmit": Record<string, unknown>;
         "mrdCancel": void;
@@ -1190,11 +1274,12 @@ declare global {
         new (): HTMLMrdImageFieldElement;
     };
     interface HTMLMrdLayoutSectionElementEventMap {
-        "mrdNavigate": { href?: string; label: string; navigate?: ClientLayoutItemNavigate };
+        "mrdNavigate": { href?: string; label: string; navigate?: ClientLayoutItemNavigate; navigateBehaviour?: ClientLayoutNavigateBehaviour };
         "mrdSearch": { query: string; dataClass: string };
         "mrdDownload": { href: string; fileName: string };
         "mrdLoadViewPage": { name: string; page: number; sort: string; path: string; qs: string; nodeId?: string };
         "mrdLoadImage": { fieldName: string; href: string };
+        "mrdLoadDocumentPreview": { href: string };
         "mrdViewAction": { name: string; action: string; dataClass: string; path?: string; qs?: string; parentPath?: string | null; basicType?: string };
         "mrdLoadViewAggregations": { name: string; dataClass: string; path: string; qs: string; aggQs: string };
         "mrdLoadViewDistinct": { name: string; nodeId: string; distinct: string; path: string; qs: string };
@@ -1395,6 +1480,7 @@ declare global {
         "mrd-email-field": HTMLMrdEmailFieldElement;
         "mrd-field": HTMLMrdFieldElement;
         "mrd-file-field": HTMLMrdFileFieldElement;
+        "mrd-file-preview": HTMLMrdFilePreviewElement;
         "mrd-form": HTMLMrdFormElement;
         "mrd-hyperlink-field": HTMLMrdHyperlinkFieldElement;
         "mrd-image-field": HTMLMrdImageFieldElement;
@@ -1579,9 +1665,9 @@ declare namespace LocalJSX {
          */
         "onMrdLoadPage"?: (event: MrdDocumentContainerCustomEvent<{ page: number; sort: string; path: string; qs: string; nodeId?: string }>) => void;
         /**
-          * A row / document was activated. Host routes to the object page.
+          * A row / document was activated. Host routes to the object page. Documents are always the "quick look" use case, so navigateBehaviour is hardcoded to OVERLAY_PAGE here — unlike the generic VIEW/RELATED_VIEW table path in mrd-layout-section, which takes it from the item's configuration.
          */
-        "onMrdNavigate"?: (event: MrdDocumentContainerCustomEvent<{ href?: string; label: string }>) => void;
+        "onMrdNavigate"?: (event: MrdDocumentContainerCustomEvent<{ href?: string; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour }>) => void;
         /**
           * Generic "update an existing object" request, re-emitted from the folder tree (a document was dragged into another folder/container).
          */
@@ -1696,10 +1782,24 @@ declare namespace LocalJSX {
           * Download the document file. Host resolves the href to a signed URL.
          */
         "onMrdDownload"?: (event: MrdDocumentViewCustomEvent<{ href: string; fileName: string }>) => void;
+        /**
+          * The file slot has an href and needs a signed URL for inline preview. Fired once on load and again whenever the file href changes (e.g. the overlay is reused for a different document via prev/next). Host resolves it and calls back with `previewUrl` — the same pattern as mrdLoadImage / setImagePreview on mrd-layout-section.
+         */
+        "onMrdLoadPreview"?: (event: MrdDocumentViewCustomEvent<{ href: string }>) => void;
         /**
           * Navigate to the container (dossier). Host resolves the href and routes.
          */
         "onMrdNavigate"?: (event: MrdDocumentViewCustomEvent<{ href?: string; label: string }>) => void;
+        /**
+          * 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.
+          * @default 640
+         */
+        "previewHeight"?: number;
+        /**
+          * 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.
+          * @default ''
+         */
+        "previewUrl"?: string;
     }
     interface MrdEmailField {
         /**
@@ -1786,6 +1886,48 @@ declare namespace LocalJSX {
          */
         "value"?: unknown;
     }
+    /**
+     * Renders a signed URL inline as a PDF (native browser viewer, via `<iframe>`)
+     * or an image (`<img>`), picked from `mimeType`/`fileName`. Purely
+     * presentational: the signed URL is used directly as element `src` — a
+     * navigation, not a fetch/XHR, so no CORS handling is needed here. Fetching
+     * the signed URL itself is the host's responsibility, same as `mrdLoadImage` /
+     * `setImagePreview` on mrd-layout-section.
+     */
+    interface MrdFilePreview {
+        /**
+          * Original file name — used for extension-based detection when `mimeType` is absent, and as alt/title text.
+          * @default ''
+         */
+        "fileName"?: string;
+        /**
+          * The file's own reference href (not the signed preview URL in `src`). When set, an unsupported type falls back to the same download button used elsewhere in the library, so hosts need no new wiring.
+          * @default ''
+         */
+        "href"?: string;
+        /**
+          * @default navigator.language
+         */
+        "locale"?: string;
+        /**
+          * Declared mime type (e.g. 'application/pdf', 'image/png'), when known. Authoritative over `fileName` when present.
+          * @default ''
+         */
+        "mimeType"?: string;
+        /**
+          * Download the file. Same shape as mrd-document-view / mrd-layout-section's mrdDownload — host resolves `href` to a signed URL.
+         */
+        "onMrdDownload"?: (event: MrdFilePreviewCustomEvent<{ href: string; fileName: string }>) => void;
+        /**
+          * The image failed to load — most likely an expired signed URL. Host should fetch a fresh signed URL and update `src`. Note: this is only raised for images. Browsers don't reliably surface HTTP-level failures (e.g. a 403 on an expired URL) through an iframe's load/error events, so the same detection isn't available for PDFs.
+         */
+        "onMrdPreviewReload"?: (event: MrdFilePreviewCustomEvent<void>) => void;
+        /**
+          * Signed URL to render.
+          * @default ''
+         */
+        "src"?: string;
+    }
     interface MrdForm {
         "layout": ClientLayout;
         /**
@@ -1905,6 +2047,11 @@ declare namespace LocalJSX {
           * @default {}
          */
         "data"?: Record<string, unknown>;
+        /**
+          * 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.
+          * @default 640
+         */
+        "documentPreviewHeight"?: number;
         /**
           * Items from one layout entry in ClientDashboardMetadata.layouts[].
           * @default []
@@ -1924,6 +2071,10 @@ declare namespace LocalJSX {
          */
         "onMrdCreateObject"?: (event: MrdLayoutSectionCustomEvent<{ name: string; path: string; values: Record<string, unknown> }>) => void;
         "onMrdDownload"?: (event: MrdLayoutSectionCustomEvent<{ href: string; fileName: string }>) => void;
+        /**
+          * Re-emitted from an embedded mrd-document-view's mrdLoadPreview (commons.document single-object view); host resolves the file href to a signed URL and calls setDocumentPreviewUrl().
+         */
+        "onMrdLoadDocumentPreview"?: (event: MrdLayoutSectionCustomEvent<{ href: string }>) => void;
         /**
           * Fired once on load for each IMAGE field that has an href; host resolves the URL and calls setImagePreview().
          */
@@ -1940,7 +2091,7 @@ declare namespace LocalJSX {
           * Re-emitted from an embedded mrd-table's or mrd-document-list's mrdLoadPage; host fetches the rows and calls setViewPage(). `nodeId` is present for a document-list folder load.
          */
         "onMrdLoadViewPage"?: (event: MrdLayoutSectionCustomEvent<{ name: string; page: number; sort: string; path: string; qs: string; nodeId?: string }>) => void;
-        "onMrdNavigate"?: (event: MrdLayoutSectionCustomEvent<{ href?: string; label: string; navigate?: ClientLayoutItemNavigate }>) => void;
+        "onMrdNavigate"?: (event: MrdLayoutSectionCustomEvent<{ href?: string; label: string; navigate?: ClientLayoutItemNavigate; navigateBehaviour?: ClientLayoutNavigateBehaviour }>) => void;
         "onMrdSearch"?: (event: MrdLayoutSectionCustomEvent<{ query: string; dataClass: string }>) => void;
         /**
           * Generic "update an existing object" request from an embedded document view (a document dragged into another folder). Host PATCHes `href` with `values`.
@@ -2363,6 +2514,8 @@ declare namespace LocalJSX {
     }
     interface MrdDocumentViewAttributes {
         "locale": string;
+        "previewUrl": string;
+        "previewHeight": number;
     }
     interface MrdEmailFieldAttributes {
         "name": string;
@@ -2385,6 +2538,13 @@ declare namespace LocalJSX {
         "accept": string;
         "maxSize": number;
     }
+    interface MrdFilePreviewAttributes {
+        "src": string;
+        "mimeType": string;
+        "fileName": string;
+        "href": string;
+        "locale": string;
+    }
     interface MrdFormAttributes {
         "locale": string;
         "referenceHref": string;
@@ -2411,6 +2571,7 @@ declare namespace LocalJSX {
     }
     interface MrdLayoutSectionAttributes {
         "locale": string;
+        "documentPreviewHeight": number;
     }
     interface MrdListFieldAttributes {
         "name": string;
@@ -2511,6 +2672,7 @@ declare namespace LocalJSX {
         "mrd-email-field": Omit<MrdEmailField, keyof MrdEmailFieldAttributes> & { [K in keyof MrdEmailField & keyof MrdEmailFieldAttributes]?: MrdEmailField[K] } & { [K in keyof MrdEmailField & keyof MrdEmailFieldAttributes as `attr:${K}`]?: MrdEmailFieldAttributes[K] } & { [K in keyof MrdEmailField & keyof MrdEmailFieldAttributes as `prop:${K}`]?: MrdEmailField[K] };
         "mrd-field": Omit<MrdField, keyof MrdFieldAttributes> & { [K in keyof MrdField & keyof MrdFieldAttributes]?: MrdField[K] } & { [K in keyof MrdField & keyof MrdFieldAttributes as `attr:${K}`]?: MrdFieldAttributes[K] } & { [K in keyof MrdField & keyof MrdFieldAttributes as `prop:${K}`]?: MrdField[K] };
         "mrd-file-field": Omit<MrdFileField, keyof MrdFileFieldAttributes> & { [K in keyof MrdFileField & keyof MrdFileFieldAttributes]?: MrdFileField[K] } & { [K in keyof MrdFileField & keyof MrdFileFieldAttributes as `attr:${K}`]?: MrdFileFieldAttributes[K] } & { [K in keyof MrdFileField & keyof MrdFileFieldAttributes as `prop:${K}`]?: MrdFileField[K] };
+        "mrd-file-preview": Omit<MrdFilePreview, keyof MrdFilePreviewAttributes> & { [K in keyof MrdFilePreview & keyof MrdFilePreviewAttributes]?: MrdFilePreview[K] } & { [K in keyof MrdFilePreview & keyof MrdFilePreviewAttributes as `attr:${K}`]?: MrdFilePreviewAttributes[K] } & { [K in keyof MrdFilePreview & keyof MrdFilePreviewAttributes as `prop:${K}`]?: MrdFilePreview[K] };
         "mrd-form": Omit<MrdForm, keyof MrdFormAttributes> & { [K in keyof MrdForm & keyof MrdFormAttributes]?: MrdForm[K] } & { [K in keyof MrdForm & keyof MrdFormAttributes as `attr:${K}`]?: MrdFormAttributes[K] } & { [K in keyof MrdForm & keyof MrdFormAttributes as `prop:${K}`]?: MrdForm[K] };
         "mrd-hyperlink-field": Omit<MrdHyperlinkField, keyof MrdHyperlinkFieldAttributes> & { [K in keyof MrdHyperlinkField & keyof MrdHyperlinkFieldAttributes]?: MrdHyperlinkField[K] } & { [K in keyof MrdHyperlinkField & keyof MrdHyperlinkFieldAttributes as `attr:${K}`]?: MrdHyperlinkFieldAttributes[K] } & { [K in keyof MrdHyperlinkField & keyof MrdHyperlinkFieldAttributes as `prop:${K}`]?: MrdHyperlinkField[K] };
         "mrd-image-field": Omit<MrdImageField, keyof MrdImageFieldAttributes> & { [K in keyof MrdImageField & keyof MrdImageFieldAttributes]?: MrdImageField[K] } & { [K in keyof MrdImageField & keyof MrdImageFieldAttributes as `attr:${K}`]?: MrdImageFieldAttributes[K] } & { [K in keyof MrdImageField & keyof MrdImageFieldAttributes as `prop:${K}`]?: MrdImageField[K] };
@@ -2575,6 +2737,15 @@ declare module "@stencil/core" {
             "mrd-email-field": LocalJSX.IntrinsicElements["mrd-email-field"] & JSXBase.HTMLAttributes<HTMLMrdEmailFieldElement>;
             "mrd-field": LocalJSX.IntrinsicElements["mrd-field"] & JSXBase.HTMLAttributes<HTMLMrdFieldElement>;
             "mrd-file-field": LocalJSX.IntrinsicElements["mrd-file-field"] & JSXBase.HTMLAttributes<HTMLMrdFileFieldElement>;
+            /**
+             * Renders a signed URL inline as a PDF (native browser viewer, via `<iframe>`)
+             * or an image (`<img>`), picked from `mimeType`/`fileName`. Purely
+             * presentational: the signed URL is used directly as element `src` — a
+             * navigation, not a fetch/XHR, so no CORS handling is needed here. Fetching
+             * the signed URL itself is the host's responsibility, same as `mrdLoadImage` /
+             * `setImagePreview` on mrd-layout-section.
+             */
+            "mrd-file-preview": LocalJSX.IntrinsicElements["mrd-file-preview"] & JSXBase.HTMLAttributes<HTMLMrdFilePreviewElement>;
             "mrd-form": LocalJSX.IntrinsicElements["mrd-form"] & JSXBase.HTMLAttributes<HTMLMrdFormElement>;
             "mrd-hyperlink-field": LocalJSX.IntrinsicElements["mrd-hyperlink-field"] & JSXBase.HTMLAttributes<HTMLMrdHyperlinkFieldElement>;
             "mrd-image-field": LocalJSX.IntrinsicElements["mrd-image-field"] & JSXBase.HTMLAttributes<HTMLMrdImageFieldElement>;

package/dist/types/types/client-layout.d.ts

@@ -48,6 +48,12 @@ export declare enum ClientLayoutItemRelationEditBehavior {
     DROPDOWN = "DROPDOWN",
     CHECKBOX = "CHECKBOX"
 }
+/** How navigating from a row/document in this VIEW or RELATED_VIEW should open
+ *  its target: a full page navigation, or an overlay on top of the current page. */
+export declare enum ClientLayoutNavigateBehaviour {
+    PAGE = "PAGE",
+    OVERLAY_PAGE = "OVERLAY_PAGE"
+}
 /** A single sub-link within a multi-value relation link. */
 export interface DataObjectSubLink {
     href: string;
@@ -233,6 +239,10 @@ export interface ClientLayoutItem {
      *  the `commons.document` archetype's `container` slot, the view is a single
      *  container context (see mrd-document-list seeding). */
     inverseRelation?: string | null;
+    /** How navigating out of this VIEW/RELATED_VIEW opens its target. Defaults to
+     *  `PAGE` (full navigation) when absent. mrd-layout-section reads this off the
+     *  item and includes it in the mrdNavigate event detail it relays upward. */
+    navigateBehaviour?: ClientLayoutNavigateBehaviour;
     icon?: string | null;
     navigationType?: string | null;
     actionType?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmlogic/components",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Stencil.js web component library for dynamic forms and virtual-scroll data tables",
   "license": "MIT",
   "author": "Mosterd",