@mmlogic/components 0.1.23 → 0.1.25

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

@@ -0,0 +1,715 @@
+import { Host, h } from "@stencil/core";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, } from "../../types/client-layout";
+import { CellRenderer } from "../../utils/cell-renderer";
+import { t } from "../../utils/i18n";
+export class MrdLayoutSection {
+    constructor() {
+        /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
+        this.items = [];
+        /** Record data object; keys are field names, _links holds relation and related-view links. */
+        this.data = {};
+        /** View metadata map (ClientDashboardMetadata.views) for RELATED_VIEW and VIEW items. */
+        this.views = {};
+        /** Top-level _links from ClientDashboardMetadata; used to resolve hrefs for VIEW items. */
+        this.links = {};
+        this.locale = navigator.language;
+        this.searchQueryMap = {};
+        this.searchResultsMap = {};
+        this.imagePreviewUrl = null;
+        this.imagePreviews = {};
+        this.viewLinksMap = {};
+        this.searchTimers = {};
+        this.handleViewLoadPage = (e, name) => {
+            e.stopPropagation();
+            this.mrdLoadViewPage.emit({ name, page: e.detail.page, sort: e.detail.sort });
+        };
+        this.handleSearchInput = (dataClass, query) => {
+            this.searchQueryMap = Object.assign(Object.assign({}, this.searchQueryMap), { [dataClass]: query });
+            if (this.searchTimers[dataClass])
+                clearTimeout(this.searchTimers[dataClass]);
+            if (query.length < 2) {
+                this.searchResultsMap = Object.assign(Object.assign({}, this.searchResultsMap), { [dataClass]: [] });
+                return;
+            }
+            this.searchTimers[dataClass] = setTimeout(() => {
+                this.mrdSearch.emit({ query, dataClass });
+            }, 300);
+        };
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.emitLoadViews();
+            this.emitLoadImages();
+        }, 0);
+    }
+    linksChanged(newVal) {
+        if (Object.keys(newVal !== null && newVal !== void 0 ? newVal : {}).length > 0) {
+            this.emitLoadViews();
+        }
+    }
+    dataChanged(newVal) {
+        var _a;
+        if (newVal && Object.keys((_a = newVal === null || newVal === void 0 ? void 0 : newVal._links) !== null && _a !== void 0 ? _a : {}).length > 0) {
+            this.emitLoadViews();
+        }
+    }
+    emitLoadViews() {
+        var _a, _b, _c, _d, _e, _f;
+        const dataLinks = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
+        for (const item of this.flattenItems(this.items)) {
+            if (item.type === ClientLayoutItemType.RELATED_VIEW && item.relatedView) {
+                const rv = item.relatedView;
+                const viewConfig = this.views[rv.name];
+                if (!viewConfig)
+                    continue;
+                const href = (_c = dataLinks[rv.relatedClass]) === null || _c === void 0 ? void 0 : _c.href;
+                this.mrdLoadView.emit({ name: rv.name, href, viewConfig });
+            }
+            else if (item.type === ClientLayoutItemType.VIEW) {
+                const viewName = (_e = (_d = item.view) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : item.name;
+                if (!viewName)
+                    continue;
+                const viewConfig = this.views[viewName];
+                if (!viewConfig)
+                    continue;
+                const href = (_f = this.links[viewName]) === null || _f === void 0 ? void 0 : _f.href;
+                this.mrdLoadView.emit({ name: viewName, href, viewConfig });
+            }
+        }
+    }
+    emitLoadImages() {
+        var _a;
+        for (const item of this.flattenItems(this.items)) {
+            if (item.type === ClientLayoutItemType.FIELD && ((_a = item.field) === null || _a === void 0 ? void 0 : _a.dataType) === ClientLayoutItemFieldDataType.IMAGE) {
+                const fieldName = item.field.name;
+                const raw = this.data[fieldName];
+                const href = raw === null || raw === void 0 ? void 0 : raw.href;
+                if (href)
+                    this.mrdLoadImage.emit({ fieldName, href });
+            }
+        }
+    }
+    flattenItems(items) {
+        const result = [];
+        for (const item of items) {
+            result.push(item);
+            if (item.items)
+                result.push(...this.flattenItems(item.items));
+        }
+        return result;
+    }
+    /** Inject search results. Pass dataClass to target a specific SEARCH item; omit when there is only one. */
+    async setSearchResults(results, dataClass) {
+        const key = dataClass !== null && dataClass !== void 0 ? dataClass : this.resolveSearchKey();
+        if (key) {
+            this.searchResultsMap = Object.assign(Object.assign({}, this.searchResultsMap), { [key]: results });
+        }
+    }
+    /**
+     * Inject data into an embedded mrd-table for a RELATED_VIEW or VIEW item.
+     * Pass totalElements on page 0 to initialise the table; omit on subsequent pages.
+     * Pass pageLinks (_links from the page response) on page 0 to enable action hrefs in mrdViewAction.
+     */
+    async setViewPage(name, page, rows, totalElements, pageLinks) {
+        if (pageLinks) {
+            this.viewLinksMap = Object.assign(Object.assign({}, this.viewLinksMap), { [name]: pageLinks });
+        }
+        const table = this.el.querySelector(`mrd-table[data-view="${name}"]`);
+        if (!table)
+            return;
+        if (totalElements !== undefined) {
+            table.totalElements = totalElements;
+            await table.init();
+        }
+        await table.setPage(page, rows);
+    }
+    /** Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox. */
+    async setImagePreview(fieldName, url) {
+        this.imagePreviews = Object.assign(Object.assign({}, this.imagePreviews), { [fieldName]: url });
+    }
+    /** Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field). */
+    async openImagePreview(url) {
+        this.imagePreviewUrl = url;
+    }
+    resolveSearchKey() {
+        const items = this.flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
+        if (items.length === 1 && items[0].search)
+            return items[0].search.dataClass;
+        return null;
+    }
+    renderSingleFieldValue(item, value) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const field = item.field;
+        const dt = field.dataType;
+        switch (dt) {
+            case ClientLayoutItemFieldDataType.HYPERLINK: {
+                const v = value;
+                const href = (_a = v === null || v === void 0 ? void 0 : v.href) !== null && _a !== void 0 ? _a : String(value);
+                const label = (_c = (_b = v === null || v === void 0 ? void 0 : v.text) !== null && _b !== void 0 ? _b : v === null || v === void 0 ? void 0 : v.label) !== null && _c !== void 0 ? _c : href;
+                return (h("a", { class: "mrd-layout-section__link", href: href, target: "_blank", rel: "noopener noreferrer" }, label));
+            }
+            case ClientLayoutItemFieldDataType.TEXTBLOCK:
+                return h("span", { innerHTML: String(value) });
+            case ClientLayoutItemFieldDataType.LONGTEXT:
+                return h("pre", { class: "mrd-layout-section__pre" }, String(value));
+            case ClientLayoutItemFieldDataType.JSON:
+                return h("pre", { class: "mrd-layout-section__pre", innerHTML: CellRenderer.formatJson(value) });
+            case ClientLayoutItemFieldDataType.FILE: {
+                const v = value;
+                const fileName = (_d = v === null || v === void 0 ? void 0 : v.fileName) !== null && _d !== void 0 ? _d : String(value);
+                const href = (_e = v === null || v === void 0 ? void 0 : v.href) !== null && _e !== void 0 ? _e : '';
+                return (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ href, fileName }) }, t('download', this.locale)));
+            }
+            case ClientLayoutItemFieldDataType.IMAGE: {
+                const v = value;
+                const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
+                const fileName = (_g = v === null || v === void 0 ? void 0 : v.fileName) !== null && _g !== void 0 ? _g : '';
+                const previewUrl = this.imagePreviews[field.name];
+                if (previewUrl) {
+                    return (h("button", { class: "mrd-layout-section__image-thumb-btn", onClick: () => { this.imagePreviewUrl = previewUrl; }, title: fileName || undefined }, h("img", { class: "mrd-layout-section__image-thumb", src: previewUrl, alt: fileName })));
+                }
+                return (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ href, fileName }) }, fileName || href));
+            }
+            case ClientLayoutItemFieldDataType.BOOLEAN:
+                return (h("span", { class: `mrd-layout-section__boolean mrd-layout-section__boolean--${value ? 'true' : 'false'}` }, value ? t('yes', this.locale) : t('no', this.locale)));
+            case ClientLayoutItemFieldDataType.LIST: {
+                const listItem = ((_h = field.listItems) !== null && _h !== void 0 ? _h : []).find(li => li.key === String(value));
+                const label = (_j = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _j !== void 0 ? _j : String(value);
+                const color = listItem === null || listItem === void 0 ? void 0 : listItem.color;
+                const bg = listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor;
+                if (color && bg) {
+                    return (h("span", { class: "mrd-layout-section__badge", style: { color, backgroundColor: bg } }, label));
+                }
+                if (color) {
+                    return (h("span", { class: "mrd-layout-section__badge-dot-row" }, h("span", { class: "mrd-layout-section__badge-dot", style: { backgroundColor: color } }), label));
+                }
+                return label;
+            }
+            default: {
+                const text = CellRenderer.renderValue(dt, value, (_k = field.listItems) !== null && _k !== void 0 ? _k : [], this.locale);
+                return text || null;
+            }
+        }
+    }
+    renderFieldValue(item, rawValue) {
+        if (rawValue == null || rawValue === '')
+            return null;
+        const field = item.field;
+        if (field.multiple && Array.isArray(rawValue)) {
+            const rendered = rawValue.map(v => this.renderSingleFieldValue(item, v));
+            if (rendered.every(r => typeof r === 'string' || r == null)) {
+                return rendered.filter(Boolean).join(', ') || null;
+            }
+            return (h("span", null, rendered.map((r, i) => (h("span", { key: String(i) }, r, i < rendered.length - 1 ? ', ' : '')))));
+        }
+        return this.renderSingleFieldValue(item, rawValue);
+    }
+    renderField(item) {
+        if (!item.field)
+            return null;
+        const field = item.field;
+        const rawValue = this.data[field.name];
+        const renderedValue = this.renderFieldValue(item, rawValue);
+        if (field.header) {
+            return (h("h1", { class: "mrd-layout-section__field-header", key: field.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
+        }
+        if (renderedValue == null)
+            return null;
+        const isBlock = field.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK
+            || field.dataType === ClientLayoutItemFieldDataType.LONGTEXT
+            || field.dataType === ClientLayoutItemFieldDataType.JSON;
+        return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: field.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue)));
+    }
+    renderRelation(item) {
+        var _a, _b, _c;
+        if (!item.relation)
+            return null;
+        const links = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
+        const link = links[item.relation.name];
+        if (!link)
+            return null;
+        const makeBtn = (href, name) => (h("button", { key: href, class: "mrd-layout-section__relation-link", onClick: () => this.mrdNavigate.emit({ href, label: name }) }, name));
+        let valueContent;
+        if ((_c = link.values) === null || _c === void 0 ? void 0 : _c.length) {
+            valueContent = link.values.map(v => makeBtn(v.href, v.name));
+        }
+        else if (link.name) {
+            valueContent = makeBtn(link.href, link.name);
+        }
+        if (!valueContent)
+            return null;
+        return (h("div", { class: "mrd-layout-section__field", key: item.relation.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, valueContent)));
+    }
+    renderSearch(item) {
+        var _a, _b, _c;
+        if (!item.search)
+            return null;
+        const dataClass = item.search.dataClass;
+        const query = (_a = this.searchQueryMap[dataClass]) !== null && _a !== void 0 ? _a : '';
+        const results = (_b = this.searchResultsMap[dataClass]) !== null && _b !== void 0 ? _b : [];
+        return (h("div", { class: "mrd-layout-section__search", key: `search-${dataClass}` }, h("input", { class: "mrd-layout-section__search-input", type: "text", value: query, placeholder: (_c = item.label) !== null && _c !== void 0 ? _c : '', onInput: e => this.handleSearchInput(dataClass, e.target.value) }), results.length > 0 && (h("ul", { class: "mrd-layout-section__search-results" }, results.map(r => (h("li", { key: r.id, class: "mrd-layout-section__search-result" }, h("button", { class: "mrd-layout-section__search-result-btn", onClick: () => this.mrdNavigate.emit({ href: r.id, label: r.label }) }, h("span", { class: "mrd-layout-section__search-result-label" }, r.label), r.description && h("span", { class: "mrd-layout-section__search-result-desc" }, r.description)))))))));
+    }
+    renderRelatedView(item) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const isRelated = item.type === ClientLayoutItemType.RELATED_VIEW;
+        // Support both nested (item.view / item.relatedView) and flat API format (item.name)
+        const name = isRelated
+            ? (_a = item.relatedView) === null || _a === void 0 ? void 0 : _a.name
+            : ((_c = (_b = item.view) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : item.name);
+        if (!name)
+            return null;
+        const viewConfig = this.views[name];
+        if (!viewConfig)
+            return null;
+        const showTitle = isRelated
+            ? (_d = item.relatedView) === null || _d === void 0 ? void 0 : _d.showTitle
+            : ((_g = (_f = (_e = item.view) === null || _e === void 0 ? void 0 : _e.showTitle) !== null && _f !== void 0 ? _f : item.showTitle) !== null && _g !== void 0 ? _g : false);
+        const altViews = isRelated ? undefined : item.alternativeViews;
+        const rawActions = (_h = item.actions) !== null && _h !== void 0 ? _h : ['NEW', 'EXPORT'];
+        const tableActions = rawActions.reduce((acc, a) => {
+            if (a === 'NEW')
+                acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary' });
+            if (a === 'EXPORT')
+                acc.push({ action: 'export', label: t('table_export_excel', this.locale), icon: 'assets/sprites.svg#icon-file-excel' });
+            return acc;
+        }, []);
+        return (h("div", { class: "mrd-layout-section__related-view", key: `view-${name}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), h("mrd-table", { "data-view": name, columns: viewConfig.values, locale: this.locale, defaultSort: (_j = viewConfig.defaultSort) !== null && _j !== void 0 ? _j : '', alternativeViews: altViews, actions: tableActions, onMrdLoadPage: (e) => this.handleViewLoadPage(e, name), onMrdAction: (e) => {
+                var _a, _b, _c;
+                e.stopPropagation();
+                const pl = (_a = this.viewLinksMap[name]) !== null && _a !== void 0 ? _a : {};
+                const href = e.detail.action === 'export' ? (_b = pl['excel']) === null || _b === void 0 ? void 0 : _b.href : (_c = pl['self']) === null || _c === void 0 ? void 0 : _c.href;
+                this.mrdViewAction.emit({ name, action: e.detail.action, href });
+            } })));
+    }
+    renderItem(item) {
+        var _a, _b;
+        switch (item.type) {
+            case ClientLayoutItemType.FIELD:
+                return this.renderField(item);
+            case ClientLayoutItemType.RELATION:
+                return this.renderRelation(item);
+            case ClientLayoutItemType.HEADER:
+                return (h("h2", { class: "mrd-layout-section__header", key: `header-${item.label}` }, item.label));
+            case ClientLayoutItemType.TEXT:
+                return h("div", { class: "mrd-layout-section__text", key: `text-${item.label}`, innerHTML: (_a = item.label) !== null && _a !== void 0 ? _a : '' });
+            case ClientLayoutItemType.NAVIGATE:
+                return (h("button", { class: "mrd-layout-section__navigate", key: `nav-${item.label}`, onClick: () => { var _a; return this.mrdNavigate.emit({ label: (_a = item.label) !== null && _a !== void 0 ? _a : '', navigate: item.navigate }); } }, item.label));
+            case ClientLayoutItemType.SEARCH:
+                return this.renderSearch(item);
+            case ClientLayoutItemType.SECTION:
+            case ClientLayoutItemType.GROUP:
+                return (h("div", { class: "mrd-layout-section__group", key: `group-${item.label}` }, item.label && h("h3", { class: "mrd-layout-section__group-title" }, item.label), ((_b = item.items) !== null && _b !== void 0 ? _b : []).map(child => this.renderItem(child))));
+            case ClientLayoutItemType.RELATED_VIEW:
+            case ClientLayoutItemType.VIEW:
+                return this.renderRelatedView(item);
+            default:
+                return null;
+        }
+    }
+    renderImageModal() {
+        if (!this.imagePreviewUrl)
+            return null;
+        return (h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
+    }
+    render() {
+        return (h(Host, { key: '007077c73ddcc5c9e6ce546f083f42c07f8b94a4' }, h("div", { key: 'e9904536e9361d9a36d613c20af55ddf8d9acda6', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+    }
+    static get is() { return "mrd-layout-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-layout-section.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-layout-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItem[]",
+                    "resolved": "ClientLayoutItem[]",
+                    "references": {
+                        "ClientLayoutItem": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutItem",
+                            "referenceLocation": "ClientLayoutItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items from one layout entry in ClientDashboardMetadata.layouts[]."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "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": "Record data object; keys are field names, _links holds relation and related-view links."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "views": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, ClientViewMetadata>",
+                    "resolved": "ClientViewMetadata | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "ClientViewMetadata": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientViewMetadata",
+                            "referenceLocation": "ClientViewMetadata"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "View metadata map (ClientDashboardMetadata.views) for RELATED_VIEW and VIEW items."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "links": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, { href: string }>",
+                    "resolved": "string | { href: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Top-level _links from ClientDashboardMetadata; used to resolve hrefs for VIEW items."
+                },
+                "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchQueryMap": {},
+            "searchResultsMap": {},
+            "imagePreviewUrl": {},
+            "imagePreviews": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate }",
+                    "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; }",
+                    "references": {
+                        "ClientLayoutItemNavigate": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutItemNavigate",
+                            "referenceLocation": "ClientLayoutItemNavigate"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdSearch",
+                "name": "mrdSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string; dataClass: string }",
+                    "resolved": "{ query: string; dataClass: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdDownload",
+                "name": "mrdDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ href: string; fileName: string }",
+                    "resolved": "{ href: string; fileName: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdLoadView",
+                "name": "mrdLoadView",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired once on load for each RELATED_VIEW and VIEW item; host fetches page 0 and calls setViewPage()."
+                },
+                "complexType": {
+                    "original": "{ name: string; href?: string; viewConfig: ClientViewMetadata }",
+                    "resolved": "{ name: string; href?: string | undefined; viewConfig: ClientViewMetadata; }",
+                    "references": {
+                        "ClientViewMetadata": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientViewMetadata",
+                            "referenceLocation": "ClientViewMetadata"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdLoadViewPage",
+                "name": "mrdLoadViewPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from an embedded mrd-table's mrdLoadPage; host fetches the next page and calls setViewPage()."
+                },
+                "complexType": {
+                    "original": "{ name: string; page: number; sort: string }",
+                    "resolved": "{ name: string; page: number; sort: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdLoadImage",
+                "name": "mrdLoadImage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired once on load for each IMAGE field that has an href; host resolves the URL and calls setImagePreview()."
+                },
+                "complexType": {
+                    "original": "{ fieldName: string; href: string }",
+                    "resolved": "{ fieldName: string; href: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdViewAction",
+                "name": "mrdViewAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from an embedded mrd-table's mrdAction; includes the view name and resolved href."
+                },
+                "complexType": {
+                    "original": "{ name: string; action: string; href?: string }",
+                    "resolved": "{ name: string; action: string; href?: string | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setSearchResults": {
+                "complexType": {
+                    "signature": "(results: RelationSearchResult[], dataClass?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "results",
+                            "type": "RelationSearchResult[]",
+                            "docs": ""
+                        }, {
+                            "name": "dataClass",
+                            "type": "string | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject search results. Pass dataClass to target a specific SEARCH item; omit when there is only one.",
+                    "tags": []
+                }
+            },
+            "setViewPage": {
+                "complexType": {
+                    "signature": "(name: string, page: number, rows: any[], totalElements?: number, pageLinks?: Record<string, { href: string; }>) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "page",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "rows",
+                            "type": "any[]",
+                            "docs": ""
+                        }, {
+                            "name": "totalElements",
+                            "type": "number | undefined",
+                            "docs": ""
+                        }, {
+                            "name": "pageLinks",
+                            "type": "Record<string, { href: string; }> | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject data into an embedded mrd-table for a RELATED_VIEW or VIEW item.\nPass totalElements on page 0 to initialise the table; omit on subsequent pages.\nPass pageLinks (_links from the page response) on page 0 to enable action hrefs in mrdViewAction.",
+                    "tags": []
+                }
+            },
+            "setImagePreview": {
+                "complexType": {
+                    "signature": "(fieldName: string, url: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "fieldName",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "url",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox.",
+                    "tags": []
+                }
+            },
+            "openImagePreview": {
+                "complexType": {
+                    "signature": "(url: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "url",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "links",
+                "methodName": "linksChanged"
+            }, {
+                "propName": "data",
+                "methodName": "dataChanged"
+            }];
+    }
+}