@mmlogic/components 0.1.24 → 0.1.26

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

@@ -184,83 +184,18 @@
 }
 
 /* ── View title ──────────────────────────────────────────────────────────── */
-.mrd-table__view-title {
+/* ── View switcher ───────────────────────────────────────────────────────── */
+.mrd-table__view-select {
   font-size: var(--mrd-font-size-sm);
   font-weight: 600;
   color: var(--mrd-color-neutral-800);
-}
-
-/* ── View switcher ───────────────────────────────────────────────────────── */
-.mrd-table__view-switcher {
-  position: relative;
-}
-
-.mrd-table__view-switcher-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--mrd-space-1);
+  font-family: var(--mrd-font-family);
   background: none;
   border: none;
+  outline: none;
   cursor: pointer;
-  padding: var(--mrd-space-1) var(--mrd-space-2);
-  color: var(--mrd-color-neutral-400);
-  font-size: var(--mrd-font-size-sm);
-  border-radius: var(--mrd-border-radius);
-  transition: color 0.15s, background-color 0.15s;
-  line-height: 1.4;
-}
-
-.mrd-table__view-switcher-btn:hover {
-  color: var(--mrd-color-neutral-700);
-  background-color: var(--mrd-color-neutral-50);
-}
-
-.mrd-table__view-switcher-label {
-  font-weight: var(--mrd-font-weight-medium);
-}
-
-.mrd-table__view-switcher-chevron {
-  width: 1.1rem;
-  height: 1.1rem;
-  flex-shrink: 0;
-  transition: transform 0.15s;
-}
-
-.mrd-table__view-switcher-btn--open .mrd-table__view-switcher-chevron {
-  transform: rotate(180deg);
-}
-
-.mrd-table__view-switcher-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 160px;
-  background: var(--mrd-color-white);
-  border: 1px solid var(--mrd-border-color);
-  border-radius: var(--mrd-border-radius);
-  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));
-  z-index: var(--mrd-z-dropdown, 200);
-  overflow: hidden;
-}
-
-.mrd-table__view-switcher-item {
-  display: block;
-  width: 100%;
-  padding: var(--mrd-space-2) var(--mrd-space-3);
-  background: none;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-size: var(--mrd-font-size-sm);
-  color: var(--mrd-color-neutral-700);
-  white-space: nowrap;
-  transition: background-color 0.1s, color 0.1s;
-}
-
-.mrd-table__view-switcher-item:hover {
-  background-color: var(--mrd-color-neutral-50);
-  color: var(--mrd-color-neutral-900);
+  padding: 0;
+  max-width: 220px;
 }
 
 .mrd-table__action {
@@ -746,3 +681,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: '8909be24f6452fd4f485b209b226edd4a7718d6b' }, h("div", { key: '18680ffdd64384b8725c408360da8f0f288ee6fc', class: "mrd-text-field" }, this.label && (h("label", { key: 'c4d014056181d4a92ca74a505ae48cb2cb81236d', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: '76f862523928100f1f1089fc747b2964312d77a2', 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: 'd0a1e04caea7a2d5058bc753e0885f25db302575', 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: '41b9f19dc589c26545a11db883c00b7ffe5d1c04' }, h("div", { key: '62b01e407efe1d5b8885e769f62705938f931817', class: "mrd-textarea-field" }, this.label && (h("label", { key: '284e3355dfe15c0aedcb9bafdd829269a0eea93a', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: '0dba936a6eba64457f5cc69164d0f0eaf4563698', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '0c47c25bd86d5002575a1f19848b0b0af2e87982', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: 'e678046a6c27544dd9007a6c66083cce089cb991', 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: 'f5325429315ff23757f2a575b8d317c76e23f579' }, h("div", { key: '2c2a4a49984d61cf62f94f1923d6a2a1e550fb1c', class: "mrd-time-field" }, this.label && (h("label", { key: '3ef4da8ecc8406eacf3e91e188a1ea20f8eb8779', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: '284527457812d72f5341128d3ba7873f52d5694f', 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: '7563dcb10e813c583a0fb29e07f6e7f2340609bf', 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/utils/cell-renderer.js

@@ -72,4 +72,30 @@ export class CellRenderer {
                 return String(value);
         }
     }
+    /**
+     * Returns syntax-highlighted JSON as an HTML string with inline styles.
+     * compact=true → single line (no indentation); compact=false → pretty-printed.
+     */
+    static formatJson(value, compact = false) {
+        try {
+            const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+            const json = compact ? JSON.stringify(parsed) : JSON.stringify(parsed, null, 2);
+            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
+                let style = 'color:#2aa198';
+                if (/^"/.test(match)) {
+                    style = /:$/.test(match) ? 'color:#881391' : 'color:#268bd2';
+                }
+                else if (/true|false/.test(match)) {
+                    style = 'color:#b58900';
+                }
+                else if (/null/.test(match)) {
+                    style = 'color:#dc322f';
+                }
+                return `<span style="${style}">${match}</span>`;
+            });
+        }
+        catch (_a) {
+            return String(value);
+        }
+    }
 }

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MrdLayoutSection extends Components.MrdLayoutSection, HTMLElement {}
+export const MrdLayoutSection: {
+    prototype: MrdLayoutSection;
+    new (): MrdLayoutSection;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;