@mmlogic/components 0.1.23 → 0.1.25

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

@@ -12,6 +12,8 @@ const TEXT_TYPES = new Set(['TEXT', 'TEXTBLOCK', 'EMAIL', 'HYPERLINK']);
 const NUMERIC_TYPES = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
 const DATE_TYPES = new Set(['DATE', 'DATETIME', 'TIME']);
 const NO_FILTER_TYPES = new Set(['FILE', 'IMAGE']);
+/** Column types that cannot be sorted or filtered (not stored in PostgreSQL). */
+const NON_INTERACTIVE_TYPES = new Set(['LONGTEXT', 'JSON']);
 export class MrdTable {
     constructor() {
         // ── Non-state internals ────────────────────────────────────────────────────
@@ -64,6 +66,8 @@ export class MrdTable {
         this.scrollTop = 0;
         /** Full text shown in the TEXTBLOCK expand modal (null = closed). */
         this.textblockModal = null;
+        /** Syntax-highlighted JSON HTML shown in the JSON expand modal (null = closed). */
+        this.jsonModal = null;
         /** Aggregation totals received from the host via setAggregations(). Null = not yet loaded. */
         this.aggregations = null;
         /** Whether the view switcher dropdown is open. */
@@ -401,6 +405,23 @@ export class MrdTable {
             this.keydownHandler = null;
         }
     }
+    openJsonModal(html) {
+        this.jsonModal = html;
+        if (this.keydownHandler)
+            document.removeEventListener('keydown', this.keydownHandler);
+        this.keydownHandler = (ev) => {
+            if (ev.key === 'Escape')
+                this.closeJsonModal();
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+    }
+    closeJsonModal() {
+        this.jsonModal = null;
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+    }
     setPending(key, val) {
         this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { [key]: val });
     }
@@ -680,7 +701,7 @@ export class MrdTable {
     }
     // ── Render: cell ──────────────────────────────────────────────────────────
     renderCell(col, row) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
         const dataType = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '';
         const isNumeric = col.type === 'FIELD' && numericTypes.has(dataType);
@@ -695,6 +716,15 @@ export class MrdTable {
                     this.mrdDownload.emit({ href, fileName });
                 } }, h("svg", { class: "mrd-table__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), t('download', this.locale))) : ''));
         }
+        if (dataType === 'JSON') {
+            const name = (_f = (_e = col.field) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : '';
+            const rawValue = name ? row === null || row === void 0 ? void 0 : row[name] : undefined;
+            if (rawValue == null || rawValue === '')
+                return h("td", { class: "mrd-table__cell" });
+            const compactHtml = CellRenderer.formatJson(rawValue, true);
+            const prettyHtml = CellRenderer.formatJson(rawValue, false);
+            return (h("td", { class: "mrd-table__cell" }, h("span", { class: "mrd-table__json-preview", innerHTML: compactHtml }), h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openJsonModal(prettyHtml); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
+        }
         const TEXTBLOCK_MAX = 200;
         if (dataType === 'TEXTBLOCK') {
             const full = CellRenderer.render(col, row, this.locale);
@@ -737,7 +767,7 @@ export class MrdTable {
                     this.filterMode ? 'mrd-table__header--sortable' : '',
                 ].filter(Boolean).join(' ');
                 return (h("th", { class: cls, onClick: this.filterMode ? (e) => this.handleFilterOpen(col, e) : undefined }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isFiltered && this.renderFilterIcon()));
-            }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row)))))), this.renderTotalsRow()), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup(), this.renderTextblockModal()));
+            }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => this.renderCell(col, row)))))), this.renderTotalsRow()), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup(), this.renderTextblockModal(), this.renderJsonModal()));
         }
         // ── Paginated / virtual-scroll mode ────────────────────────────────────
         // Derive the authoritative row count from loaded pages:
@@ -773,13 +803,14 @@ export class MrdTable {
             const name = this.colName(col);
             const isActive = this.sortField === name;
             const isFiltered = this.activeFilters.has(name);
+            const isInteractive = !NON_INTERACTIVE_TYPES.has(this.colDataType(col));
             const cls = [
                 'mrd-table__header',
-                'mrd-table__header--sortable',
+                isInteractive ? 'mrd-table__header--sortable' : '',
                 isActive ? `mrd-table__header--sorted-${this.sortDir}` : '',
                 isFiltered ? 'mrd-table__header--filtered' : '',
             ].filter(Boolean).join(' ');
-            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: (e) => this.filterMode ? this.handleFilterOpen(col, e) : this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isActive && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), !isActive && !this.filterMode && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isFiltered && this.renderFilterIcon()));
+            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: isInteractive ? ((e) => this.filterMode ? this.handleFilterOpen(col, e) : this.handleSortClick(col)) : undefined }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), isInteractive && isActive && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), isInteractive && !isActive && !this.filterMode && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isInteractive && isFiltered && this.renderFilterIcon()));
         }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))), this.renderTotalsRow())), effectiveTotal === 0 && this.loadedPages.has(0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale))), effectiveTotal > 0 && this.renderFooter(undefined, effectiveTotal), this.renderFilterPopup(), this.renderTextblockModal()));
     }
     renderFilterIcon() {
@@ -790,6 +821,11 @@ export class MrdTable {
             return null;
         return (h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeTextblockModal(), role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: () => this.closeTextblockModal(), "aria-label": t('close', this.locale) }, "\u2715"), h("p", { class: "mrd-table__modal-text" }, this.textblockModal))));
     }
+    renderJsonModal() {
+        if (this.jsonModal === null)
+            return null;
+        return (h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeJsonModal(), role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: () => this.closeJsonModal(), "aria-label": t('close', this.locale) }, "\u2715"), h("pre", { class: "mrd-table__modal-json", innerHTML: this.jsonModal }))));
+    }
     static get is() { return "mrd-table"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
@@ -1060,6 +1096,7 @@ export class MrdTable {
             "popupPos": {},
             "scrollTop": {},
             "textblockModal": {},
+            "jsonModal": {},
             "aggregations": {},
             "viewSwitcherOpen": {}
         };

package/dist/collection/components/mrd-table/mrd-table.scss

@@ -746,3 +746,26 @@
   line-height: 1.6;
 }
 
+.mrd-table__json-preview {
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: calc(100% - 1.5rem);
+  vertical-align: middle;
+}
+
+.mrd-table__modal-json {
+  margin: 0;
+  padding-right: var(--mrd-space-6);
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.6;
+  background: none;
+  border: none;
+}
+

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

@@ -28,7 +28,7 @@ export class MrdTextField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '4ddbcb2f8915235631c6f66449b28e664c24c0a4' }, h("div", { key: '91dbb52ed715c92d4ef2bc0924fd378d0dc839a8', class: "mrd-text-field" }, this.label && (h("label", { key: 'cf3278503107d313c08034273916a4b84a16febd', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: '9ab992213bfaa372e453331e1b1e12a853c3ae6e', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'a4ff2fdd2490f644eb97f66f15edc5af0b22e823', class: "mrd-text-field__error" }, this.error))));
+        return (h(Host, { key: 'b1ea3dce848a4ad41b60599804c69a35ccd35570' }, h("div", { key: '2e327824843fe02c5851beae96d52f9eb9ee67ce', class: "mrd-text-field" }, this.label && (h("label", { key: '99026834b30a53d7cf715c59099895211ff6ddb7', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: '0e56c9115b2016ad3cb3ce8e734297354c70c7e2', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '0430c32b083484747962147e167b11ed7a1597cc', class: "mrd-text-field__error" }, this.error))));
     }
     static get is() { return "mrd-text-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -66,7 +66,7 @@ export class MrdTextareaField {
         }
     }
     render() {
-        return (h(Host, { key: '8f7544745341ea2eca4450296db53ed8b41af0e2' }, h("div", { key: '62937448dd685071e0500b8f7f53fe22b10ffa15', class: "mrd-textarea-field" }, this.label && (h("label", { key: '4a7d807d78c2a9abeaf3ff94ee5e71b167475e25', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: '599e28a45b1c161d7cfec3de138e386bf997f9b9', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '5824a225fa6ea29bf02dfd8e4b27a71e853f059e', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '1c7693269df8f3fe112a6df419e6cbace75bdaa9', class: "mrd-textarea-field__error" }, this.error))));
+        return (h(Host, { key: '7bc05fae8d48c43b56bde892537930552605727a' }, h("div", { key: '3416e9c5fdf6362602715de8427c5d2ccfa52925', class: "mrd-textarea-field" }, this.label && (h("label", { key: 'c6bd35076738b1a700b53092fb0754250c73e085', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: 'ed0483a25a62399d1ac8ee14bc59e3eb44b91814', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: 'd17c6997602b81e8b7f66f1e5cfb12b4836cb892', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '30a068872e73ca78781c9a5e1fac2c9e3ce30765', class: "mrd-textarea-field__error" }, this.error))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,7 +27,7 @@ export class MrdTimeField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '0a6e3047eb409b50a7dfa46c724e0d9824bdbad9' }, h("div", { key: '1fdcaa9cc0e44edd514d3453df0cfb264989cbca', class: "mrd-time-field" }, this.label && (h("label", { key: 'ae53864761258ae56e29474c2da68c852fe8db57', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: '60336f497545b61656756790cfb5ec096034ecf7', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'f8409b690c67873f6e4fe10f1d404b57005f0557', class: "mrd-time-field__error" }, this.error))));
+        return (h(Host, { key: '6a6828d9c5224ddfcc5d17124523037512f4970c' }, h("div", { key: '468d5295170cefc93b1e2d49b7189c8366d306b7', class: "mrd-time-field" }, this.label && (h("label", { key: '52ea233ea0a7e8563145c326c4ef9d27557b6dc8', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: 'e9f0f75517638bf4e4ead95bf69530b5c395f8bc', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '4f734c3373444df4f686a7ae6bde84a2ee39d9f4', class: "mrd-time-field__error" }, this.error))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/dev/app.js

@@ -41,12 +41,97 @@ function logEvent(type, data) {
    ===================================================================== */
 
 function showTab(name) {
+  const names = ['embedded', 'field-types', 'detail-view', 'live-api'];
   document.querySelectorAll('.tab-btn').forEach((btn, i) => {
-    const names = ['embedded', 'live-api'];
     btn.classList.toggle('active', names[i] === name);
   });
-  document.getElementById('tab-embedded').classList.toggle('active', name === 'embedded');
-  document.getElementById('tab-live-api').classList.toggle('active', name === 'live-api');
+  names.forEach(n => {
+    document.getElementById('tab-' + n).classList.toggle('active', n === name);
+  });
+  if (name === 'detail-view') initDetailViewTab();
+}
+
+/* =====================================================================
+   DETAIL VIEW TAB
+   ===================================================================== */
+
+let _detailViewInitialized = false;
+
+function initDetailViewTab() {
+  if (_detailViewInitialized) return;
+  _detailViewInitialized = true;
+
+  const table = document.getElementById('companies-table');
+  const meta  = window.EXAMPLE_COMPANY_METADATA;
+
+  table.columns      = window.EXAMPLE_COMPANY_COLUMNS;
+  table.totalElements = window.EXAMPLE_COMPANIES.length;
+  table.pageSize     = 20;
+  table.locale       = 'nl-NL';
+
+  table.addEventListener('mrdLoadPage', async (e) => {
+    await table.setPage(e.detail.page, window.EXAMPLE_COMPANIES);
+  });
+
+  table.addEventListener('mrdRowClick', (e) => {
+    showCompanyDetail(e.detail);
+  });
+
+  table.init().then(() => table.setPage(0, window.EXAMPLE_COMPANIES));
+}
+
+function showCompanyDetail(row) {
+  document.getElementById('detail-table-panel').style.display = 'none';
+  document.getElementById('detail-record-panel').style.display = 'block';
+
+  // Use the static example company (in a real app: fetch /data/:tenant/companies/:id)
+  const company  = window.EXAMPLE_COMPANY;
+  const meta     = window.EXAMPLE_COMPANY_METADATA;
+  const container = document.getElementById('detail-sections');
+  container.innerHTML = '';
+
+  meta.layouts.forEach((layout, idx) => {
+    const wrapper = document.createElement('div');
+    wrapper.style.marginBottom = '2rem';
+
+    if (layout.label) {
+      const heading = document.createElement('h3');
+      heading.style.cssText = 'font-size:1.1rem;font-weight:600;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid #e5e7eb';
+      heading.textContent = layout.label;
+      wrapper.appendChild(heading);
+    }
+
+    const section = document.createElement('mrd-layout-section');
+    section.items = layout.items;
+    section.data  = company;
+    section.views = meta.views;
+    section.locale = 'nl-NL';
+
+    section.addEventListener('mrdNavigate', (e) => {
+      logEvent('mrdNavigate', e.detail);
+    });
+
+    section.addEventListener('mrdLoadView', async (e) => {
+      const { name, viewConfig } = e.detail;
+      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
+      await section.setViewPage(name, 0, mockRows, mockRows.length);
+    });
+
+    section.addEventListener('mrdLoadViewPage', async (e) => {
+      // No more pages in the mock — just set the same rows again
+      const { name } = e.detail;
+      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
+      await section.setViewPage(name, e.detail.page, mockRows);
+    });
+
+    wrapper.appendChild(section);
+    container.appendChild(wrapper);
+  });
+}
+
+function showCompanyList() {
+  document.getElementById('detail-record-panel').style.display = 'none';
+  document.getElementById('detail-table-panel').style.display = 'block';
 }
 
 /* =====================================================================
@@ -204,6 +289,7 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
 
     // Mutable closure state — reassigned on view switch so subsequent handlers see new values
     let _activeFilters   = [];
+    let _pageLinks       = {};  // _links from the most recent page 0 response (self, excel, etc.)
     let viewLabel        = initialViewLabel;
     let alternativeViews = initialAlternativeViews;
     let viewFilter       = initialViewFilter; // static filters from view definition
@@ -639,6 +725,26 @@ document.getElementById('btn-inject-results').addEventListener('click', () => {
    ===================================================================== */
 
 document.addEventListener('DOMContentLoaded', async () => {
+  // Initialize Field Types tab (static, no auth needed)
+  const ftSection = document.getElementById('field-types-section');
+  ftSection.items = window.EXAMPLE_FIELD_TYPES_ITEMS;
+  ftSection.data  = window.EXAMPLE_FIELD_TYPES_DATA;
+  ftSection.locale = 'nl-NL';
+
+  // Simulate host resolving a signed URL for IMAGE fields (thumbnail on load).
+  ftSection.addEventListener('mrdLoadImage', (e) => {
+    const staticUrl = 'https://picsum.photos/seed/mosterd/800/600';
+    ftSection.setImagePreview(e.detail.fieldName, staticUrl);
+  });
+
+  ftSection.addEventListener('mrdNavigate', (e) => {
+    logEvent('mrdNavigate', e.detail);
+  });
+
+  ftSection.addEventListener('mrdDownload', (e) => {
+    logEvent('mrdDownload', e.detail);
+  });
+
   authRestoreSession();
   await authHandleCallback();
 

package/dist/collection/dev/example-data.js

@@ -254,3 +254,327 @@ window.EXAMPLE_VALUES = {
   startDate:    "2026-01-15",
   contactEmail: "team@mosterd.nl"
 };
+
+// ─── Companies detail view demo ────────────────────────────────────────────────
+
+/** Column definitions for the companies list table. */
+window.EXAMPLE_COMPANY_COLUMNS = [
+  { type: 'FIELD', label: 'Company name', field: { name: 'name', dataType: 'TEXT', required: true } },
+  { type: 'FIELD', label: 'Reg. number', field: { name: 'registrationNumber', dataType: 'TEXT', required: false } },
+  { type: 'FIELD', label: 'Legal form', field: { name: 'legalForm', dataType: 'TEXT', required: false } },
+  { type: 'FIELD', label: 'Start date', field: { name: 'startDate', dataType: 'DATE', required: false } },
+  { type: 'FIELD', label: 'Employees', field: { name: 'totalEmployees', dataType: 'INTEGER', required: false } },
+];
+
+/** Rows for the companies list table. */
+window.EXAMPLE_COMPANIES = [
+  {
+    name: 'Alpha Holding B.V.',
+    registrationNumber: '10000001',
+    legalForm: 'Besloten Vennootschap',
+    startDate: '2001-03-01',
+    totalEmployees: 1,
+    _links: { self: { href: '/data/demo/companies/company-1' } },
+  },
+  {
+    name: 'Beta Services N.V.',
+    registrationNumber: '20000002',
+    legalForm: 'Naamloze Vennootschap',
+    startDate: '2010-07-15',
+    totalEmployees: 45,
+    _links: { self: { href: '/data/demo/companies/company-2' } },
+  },
+  {
+    name: 'Gamma & Partners B.V.',
+    registrationNumber: '30000003',
+    legalForm: 'Besloten Vennootschap',
+    startDate: '2008-11-01',
+    totalEmployees: 12,
+    _links: { self: { href: '/data/demo/companies/company-3' } },
+  },
+  {
+    name: 'Delta Vastgoed B.V.',
+    registrationNumber: '40000004',
+    legalForm: 'Besloten Vennootschap',
+    startDate: '2020-06-15',
+    totalEmployees: 3,
+    _links: { self: { href: '/data/demo/companies/company-4' } },
+  },
+];
+
+/** Single company data object (result of GET /data/:tenant/companies/:id). */
+window.EXAMPLE_COMPANY = {
+  name: 'Alpha Holding B.V.',
+  legalName: 'Alpha Holding B.V.',
+  registrationNumber: '10000001',
+  registrationDate: null,
+  legalForm: 'Besloten Vennootschap',
+  legalFormExtended: 'Besloten Vennootschap',
+  rsin: '100000001',
+  startDate: '2001-03-01',
+  endDate: null,
+  primaryActivityDescription: 'Activiteiten van houdstermaatschappijen',
+  primaryActivityCode: '64100',
+  totalEmployees: 1,
+  noMailing: false,
+  verificationDate: '2024-01-15T09:00:00.000Z',
+  visitAddress: 'Voorbeeldstraat 1',
+  visitPostalCode: '1234AB',
+  visitCity: 'Amsterdam',
+  mailingAddress: null,
+  mailingPostalCode: null,
+  mailingCity: null,
+  _links: {
+    self: { href: '/data/demo/companies/company-1' },
+    country: { href: '/data/demo/countries/nl', name: 'Nederland' },
+    appointments: { href: '/data/demo/companies/company-1/appointments' },
+    shareClasses: { href: '/data/demo/companies/company-1/shareClasses' },
+    shareAllocations: { href: '/data/demo/shareholders/company-1/shareAllocations' },
+  },
+};
+
+/** Dashboard metadata (GET /metadata/:tenant/dataObject?types=companies,...). */
+window.EXAMPLE_COMPANY_METADATA = {
+  layoutType: 'OBJECT_DASHBOARD',
+  layouts: [
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: '',
+      tabPage: false,
+      items: [
+        { type: 'FIELD', label: 'company name', field: { name: 'name', dataType: 'TEXT', required: true, header: true } },
+        { type: 'FIELD', label: 'legal name', field: { name: 'legalName', dataType: 'TEXT', required: true } },
+        { type: 'FIELD', label: 'registration number', field: { name: 'registrationNumber', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'registration date', field: { name: 'registrationDate', dataType: 'DATE', required: false } },
+        // ACTION items are silently ignored by mrd-layout-section
+        { type: 'ACTION', label: 'company register', name: 'CompanyRegister' },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Registration details',
+      tabPage: true,
+      items: [
+        { type: 'FIELD', label: 'legal form', field: { name: 'legalForm', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'legal form extended', field: { name: 'legalFormExtended', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'rsin', field: { name: 'rsin', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'start date', field: { name: 'startDate', dataType: 'DATE', required: false } },
+        { type: 'FIELD', label: 'end date', field: { name: 'endDate', dataType: 'DATE', required: false } },
+        { type: 'FIELD', label: 'primary activity description', field: { name: 'primaryActivityDescription', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'primary activity code', field: { name: 'primaryActivityCode', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'total employees', field: { name: 'totalEmployees', dataType: 'INTEGER', required: false } },
+        { type: 'FIELD', label: 'no mailing', field: { name: 'noMailing', dataType: 'BOOLEAN', required: false } },
+        { type: 'FIELD', label: 'verification date', field: { name: 'verificationDate', dataType: 'DATETIME', required: false } },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Contact information',
+      tabPage: true,
+      items: [
+        { type: 'FIELD', label: 'visit address', field: { name: 'visitAddress', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'visit postal code', field: { name: 'visitPostalCode', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'visit city', field: { name: 'visitCity', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'mailing address', field: { name: 'mailingAddress', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'mailing postal code', field: { name: 'mailingPostalCode', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'mailing city', field: { name: 'mailingCity', dataType: 'TEXT', required: false } },
+        {
+          type: 'RELATION',
+          label: 'country',
+          relation: { name: 'country', label: 'country', relatedClass: 'commons.country', mostSignificantClass: 'countries', required: false },
+        },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Appointments',
+      tabPage: true,
+      items: [
+        {
+          type: 'RELATED_VIEW',
+          label: 'Appointments',
+          name: 'view0',
+          relatedView: { name: 'view0', relatedClass: 'appointments', showTitle: false },
+        },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Share classes',
+      tabPage: true,
+      items: [
+        {
+          type: 'RELATED_VIEW',
+          label: 'Share classes',
+          name: 'view1',
+          relatedView: { name: 'view1', relatedClass: 'shareClasses', showTitle: false },
+        },
+      ],
+    },
+  ],
+  views: {
+    view0: {
+      name: null,
+      defaultView: true,
+      defaultSort: 'name',
+      values: [
+        { type: 'FIELD', label: 'name', field: { name: 'name', dataType: 'TEXT', required: true } },
+        {
+          type: 'RELATION', label: 'Officer',
+          relation: { name: 'officer', label: 'Officer', relatedClass: 'housekeeping.officer', mostSignificantClass: 'entities', required: true },
+        },
+        {
+          type: 'FIELD', label: 'Authority',
+          field: {
+            name: 'authority', dataType: 'LIST', required: false,
+            listItems: [
+              { key: 'SOLE', label: 'Sole authority' },
+              { key: 'JOINT', label: 'Joint authority' },
+            ],
+          },
+        },
+        { type: 'FIELD', label: 'start date', field: { name: 'activeDate', dataType: 'DATE', required: false } },
+        { type: 'FIELD', label: 'end date', field: { name: 'inactiveDate', dataType: 'DATE', required: false } },
+      ],
+      type: 'appointments',
+      singularLabel: 'Appointment',
+      pluralLabel: 'Appointments',
+    },
+    view1: {
+      name: null,
+      defaultView: true,
+      defaultSort: 'name',
+      values: [
+        { type: 'FIELD', label: 'name', field: { name: 'name', dataType: 'TEXT', required: true } },
+        { type: 'FIELD', label: 'Nominal value', field: { name: 'nominalValue', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'Currency', field: { name: 'currency', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'Authorised shares', field: { name: 'authorizedShares', dataType: 'INTEGER', required: false } },
+      ],
+      type: 'shareClasses',
+      singularLabel: 'Share class',
+      pluralLabel: 'Share classes',
+    },
+  },
+  _links: {
+    view0: { href: '/data/demo/appointments' },
+    view1: { href: '/data/demo/shareClasses' },
+  },
+};
+
+/** Mock appointment rows for the embedded table. */
+window.EXAMPLE_APPOINTMENTS = [
+  {
+    name: 'Directeur',
+    authority: 'SOLE',
+    activeDate: '2001-03-01',
+    inactiveDate: null,
+    _links: {
+      self: { href: '/data/demo/appointments/apt-1' },
+      officer: { href: '/data/demo/entities/person-1', name: 'A. Jansen' },
+    },
+  },
+  {
+    name: 'Commissaris',
+    authority: 'JOINT',
+    activeDate: '2018-03-01',
+    inactiveDate: null,
+    _links: {
+      self: { href: '/data/demo/appointments/apt-2' },
+      officer: { href: '/data/demo/entities/person-2', name: 'B. de Wit' },
+    },
+  },
+];
+
+/** Mock share class rows for the embedded table. */
+window.EXAMPLE_SHARE_CLASSES = [
+  {
+    name: 'Gewone aandelen',
+    nominalValue: '1.00',
+    currency: 'EUR',
+    authorizedShares: 1800,
+    _links: { self: { href: '/data/demo/shareClasses/sc-1' } },
+  },
+  {
+    name: 'Preferente aandelen',
+    nominalValue: '1.00',
+    currency: 'EUR',
+    authorizedShares: 200,
+    _links: { self: { href: '/data/demo/shareClasses/sc-2' } },
+  },
+];
+
+// ─── Field Types demo ─────────────────────────────────────────────────────────
+
+window.EXAMPLE_FIELD_TYPES_ITEMS = [
+  { type: 'FIELD', label: 'Name (header)', field: { name: 'fHeader', dataType: 'TEXT', required: false, header: true } },
+  { type: 'FIELD', label: 'Text', field: { name: 'fText', dataType: 'TEXT', required: false } },
+  { type: 'FIELD', label: 'Email', field: { name: 'fEmail', dataType: 'EMAIL', required: false } },
+  { type: 'FIELD', label: 'Hyperlink', field: { name: 'fHyperlink', dataType: 'HYPERLINK', required: false } },
+  { type: 'FIELD', label: 'Integer', field: { name: 'fInteger', dataType: 'INTEGER', required: false } },
+  { type: 'FIELD', label: 'Decimal', field: { name: 'fDecimal', dataType: 'DECIMAL', required: false } },
+  { type: 'FIELD', label: 'Percentage', field: { name: 'fPercentage', dataType: 'PERCENTAGE', required: false } },
+  { type: 'FIELD', label: 'Currency', field: { name: 'fCurrency', dataType: 'CURRENCY', required: false } },
+  { type: 'FIELD', label: 'Boolean (true)', field: { name: 'fBoolTrue', dataType: 'BOOLEAN', required: false } },
+  { type: 'FIELD', label: 'Boolean (false)', field: { name: 'fBoolFalse', dataType: 'BOOLEAN', required: false } },
+  { type: 'FIELD', label: 'Date', field: { name: 'fDate', dataType: 'DATE', required: false } },
+  { type: 'FIELD', label: 'DateTime', field: { name: 'fDatetime', dataType: 'DATETIME', required: false } },
+  { type: 'FIELD', label: 'Time', field: { name: 'fTime', dataType: 'TIME', required: false } },
+  {
+    type: 'FIELD', label: 'List (no color)', field: {
+      name: 'fListPlain', dataType: 'LIST', required: false,
+      listItems: [{ key: 'a', label: 'Option A' }, { key: 'b', label: 'Option B' }],
+    },
+  },
+  {
+    type: 'FIELD', label: 'List (color only)', field: {
+      name: 'fListColor', dataType: 'LIST', required: false,
+      listItems: [
+        { key: 'active',   label: 'Active',   color: '#16a34a' },
+        { key: 'inactive', label: 'Inactive', color: '#dc2626' },
+      ],
+    },
+  },
+  {
+    type: 'FIELD', label: 'List (color + bg)', field: {
+      name: 'fListBadge', dataType: 'LIST', required: false,
+      listItems: [
+        { key: 'approved', label: 'Approved', color: '#14532d', backgroundColor: '#dcfce7' },
+        { key: 'rejected', label: 'Rejected', color: '#7f1d1d', backgroundColor: '#fee2e2' },
+        { key: 'pending',  label: 'Pending',  color: '#78350f', backgroundColor: '#fef3c7' },
+      ],
+    },
+  },
+  { type: 'RELATION', label: 'Relation (single)', relation: { name: 'fRelation', label: 'Relation', relatedClass: 'demo.entity', required: false } },
+  { type: 'FIELD', label: 'File', field: { name: 'fFile', dataType: 'FILE', required: false } },
+  { type: 'FIELD', label: 'Image', field: { name: 'fImage', dataType: 'IMAGE', required: false } },
+  { type: 'FIELD', label: 'Textblock', field: { name: 'fTextblock', dataType: 'TEXTBLOCK', required: false } },
+  { type: 'FIELD', label: 'Longtext', field: { name: 'fLongtext', dataType: 'LONGTEXT', required: false } },
+  { type: 'FIELD', label: 'JSON', field: { name: 'fJson', dataType: 'JSON', required: false } },
+];
+
+window.EXAMPLE_FIELD_TYPES_DATA = {
+  fHeader:     'Voorbeeld Bedrijf B.V.',
+  fText:       'Voorbeeld tekst',
+  fEmail:      'info@example.com',
+  fHyperlink:  { href: 'https://example.com', text: 'example.com' },
+  fInteger:    42,
+  fDecimal:    3.14159,
+  fPercentage: 0.7825,
+  fCurrency:   { amount: 1250.50, currency: 'EUR' },
+  fBoolTrue:   true,
+  fBoolFalse:  false,
+  fDate:       '2024-03-15',
+  fDatetime:   '2024-03-15T14:30:00.000Z',
+  fTime:       '14:30:00',
+  fListPlain:  'a',
+  fListColor:  'active',
+  fListBadge:  'approved',
+  fFile:       { href: '/api/files/example-document', fileName: 'voorbeeld-document.pdf' },
+  fImage:      { href: '/api/files/example-photo', fileName: 'voorbeeld-foto.jpg' },
+  fTextblock:  '<p>Dit is een <strong>opgemaakte</strong> tekst met <em>html</em>-inhoud. Geschikt voor langere beschrijvingen met opmaak.</p>',
+  fLongtext:   'Dit is een langere stuk platte tekst zonder opmaak.\nHet kan meerdere regels bevatten en wordt getoond in een pre-blok zodat witruimte bewaard blijft.',
+  fJson:       { id: 1, status: 'active', tags: ['alpha', 'beta'], meta: { created: '2024-01-01', valid: true } },
+  _links: {
+    fRelation: { href: '/data/demo/entities/person-1', name: 'A. Jansen' },
+  },
+};

package/dist/collection/types/client-layout.js

@@ -45,6 +45,8 @@ export var ClientLayoutItemFieldDataType;
     ClientLayoutItemFieldDataType["LIST"] = "LIST";
     ClientLayoutItemFieldDataType["FILE"] = "FILE";
     ClientLayoutItemFieldDataType["IMAGE"] = "IMAGE";
+    ClientLayoutItemFieldDataType["LONGTEXT"] = "LONGTEXT";
+    ClientLayoutItemFieldDataType["JSON"] = "JSON";
 })(ClientLayoutItemFieldDataType || (ClientLayoutItemFieldDataType = {}));
 // ─── Relation display / edit behaviour ───────────────────────────────────────
 export var ClientLayoutItemRelationDisplayType;