@mmlogic/components 0.1.29 → 0.2.0

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

@@ -13,7 +13,7 @@ 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']);
+const NON_INTERACTIVE_TYPES = new Set(['LONGTEXT', 'JSON', 'FILE', 'IMAGE']);
 export class MrdTable {
     constructor() {
         // ── Non-state internals ────────────────────────────────────────────────────
@@ -185,25 +185,25 @@ export class MrdTable {
         return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
     }
     colName(col) {
-        var _a, _b, _c, _d;
-        return (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
+        var _a;
+        return (_a = col.name) !== null && _a !== void 0 ? _a : '';
     }
     colDataType(col) {
-        var _a, _b;
+        var _a;
         if (col.type === 'RELATION')
             return 'RELATION';
-        return (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : 'TEXT';
+        return (_a = col.dataType) !== null && _a !== void 0 ? _a : 'TEXT';
     }
     // ── Aggregation helpers ────────────────────────────────────────────────────
     buildAggregationParams() {
         var _a;
         const groups = { sum: [], avg: [], count: [] };
         for (const col of this.columns) {
-            if (col.type !== 'FIELD' || !((_a = col.field) === null || _a === void 0 ? void 0 : _a.aggregate))
+            if (col.type !== 'FIELD' || !col.aggregate)
                 continue;
-            const fn = col.field.aggregate.toLowerCase();
+            const fn = col.aggregate.toLowerCase();
             if (fn in groups)
-                groups[fn].push(col.field.name);
+                groups[fn].push((_a = col.name) !== null && _a !== void 0 ? _a : '');
         }
         const params = {};
         if (groups.sum.length)
@@ -221,19 +221,19 @@ export class MrdTable {
     }
     renderAggregationValue(col) {
         var _a, _b;
-        if (col.type !== 'FIELD' || !((_a = col.field) === null || _a === void 0 ? void 0 : _a.aggregate) || !this.aggregations)
+        if (col.type !== 'FIELD' || !col.aggregate || !this.aggregations)
             return '';
-        const fn = col.field.aggregate.toLowerCase();
-        const val = (_b = this.aggregations[fn]) === null || _b === void 0 ? void 0 : _b[col.field.name];
+        const fn = col.aggregate.toLowerCase();
+        const val = (_a = this.aggregations[fn]) === null || _a === void 0 ? void 0 : _a[(_b = col.name) !== null && _b !== void 0 ? _b : ''];
         if (val == null)
             return '';
-        const dt = col.field.dataType;
+        const dt = col.dataType;
         if (dt === 'INTEGER')
             return formatNumber(val, this.locale, { maximumFractionDigits: 0 });
         if (dt === 'PERCENTAGE')
             return formatPercentage(val, this.locale);
-        if (dt === 'CURRENCY' && col.field.currencyCode)
-            return formatCurrency(val, col.field.currencyCode, this.locale);
+        if (dt === 'CURRENCY' && col.currencyCode)
+            return formatCurrency(val, col.currencyCode, this.locale);
         return formatNumber(val, this.locale);
     }
     // ── Reset pagination ───────────────────────────────────────────────────────
@@ -578,7 +578,7 @@ export class MrdTable {
     }
     // ── Render: filter popup ───────────────────────────────────────────────────
     renderFilterEditor(col) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g;
         const pf = (_a = this.pendingFilter) !== null && _a !== void 0 ? _a : {};
         const dataType = this.colDataType(col);
         if (NO_FILTER_TYPES.has(dataType)) {
@@ -594,19 +594,19 @@ export class MrdTable {
             ].map(opt => (h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: !noValueOp && pf.value === opt.value, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined, value: opt.value }); } }), t(opt.labelKey, this.locale)))), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isEmpty', value: undefined }); } }), t('filter_is_empty', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isNotEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isNotEmpty', value: undefined }); } }), t('filter_is_not_empty', this.locale))));
         }
         if (dataType === 'LIST') {
-            const items = (_c = (_b = col.field) === null || _b === void 0 ? void 0 : _b.listItems) !== null && _c !== void 0 ? _c : [];
-            const selected = (_d = pf.values) !== null && _d !== void 0 ? _d : [];
+            const items = (_b = col.listItems) !== null && _b !== void 0 ? _b : [];
+            const selected = (_c = pf.values) !== null && _c !== void 0 ? _c : [];
             return (h("div", { class: "mrd-table__filter-list" }, h("div", { class: "mrd-table__filter-list-controls" }, h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: items.map(i => i.key) }); } }, t('filter_select_all', this.locale)), h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: [] }); } }, t('filter_select_none', this.locale))), items.map(item => (h("label", { class: "mrd-table__filter-checkbox-label" }, h("input", { type: "checkbox", checked: selected.includes(item.key), onChange: (e) => this.togglePendingValue(item.key, e.target.checked) }), item.label)))));
         }
         if (TEXT_TYPES.has(dataType) || dataType === 'RELATION') {
-            const op = (_e = pf.operator) !== null && _e !== void 0 ? _e : 'startsWith';
+            const op = (_d = pf.operator) !== null && _d !== void 0 ? _d : 'startsWith';
             const noInput = op === 'isEmpty' || op === 'isNotEmpty';
             return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => this.setPending('operator', e.target.value) }, [
                 { val: 'startsWith', labelKey: 'filter_starts_with' },
                 { val: 'equals', labelKey: 'filter_equals' },
                 { val: 'isEmpty', labelKey: 'filter_is_empty' },
                 { val: 'isNotEmpty', labelKey: 'filter_is_not_empty' },
-            ].map(o => h("option", { value: o.val, selected: op === o.val }, t(o.labelKey, this.locale)))), !noInput && (h("input", { type: "text", class: "mrd-table__filter-input", value: String((_f = pf.value) !== null && _f !== void 0 ? _f : ''), placeholder: t('filter_search_value', this.locale), onInput: (e) => this.setPending('value', e.target.value) }))));
+            ].map(o => h("option", { value: o.val, selected: op === o.val }, t(o.labelKey, this.locale)))), !noInput && (h("input", { type: "text", class: "mrd-table__filter-input", value: String((_e = pf.value) !== null && _e !== void 0 ? _e : ''), placeholder: t('filter_search_value', this.locale), onInput: (e) => this.setPending('value', e.target.value) }))));
         }
         if (NUMERIC_TYPES.has(dataType)) {
             const numOp = pf.operator;
@@ -634,7 +634,7 @@ export class MrdTable {
                     else {
                         this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
                     }
-                } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), h("option", { value: "isEmpty", selected: dtOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: dtOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: "date", class: "mrd-table__filter-input", value: String((_g = pf.value) !== null && _g !== void 0 ? _g : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range mrd-table__filter-range--stacked" }, h("label", { class: "mrd-table__filter-range-label" }, t('filter_from', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("label", { class: "mrd-table__filter-range-label" }, t('filter_to', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
+                } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), h("option", { value: "isEmpty", selected: dtOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: dtOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: "date", class: "mrd-table__filter-input", value: String((_f = pf.value) !== null && _f !== void 0 ? _f : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range mrd-table__filter-range--stacked" }, h("label", { class: "mrd-table__filter-range-label" }, t('filter_from', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("label", { class: "mrd-table__filter-range-label" }, t('filter_to', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
         }
         if (DATE_TYPES.has(dataType)) {
             const inputType = dataType === 'DATE' ? 'date' : 'time';
@@ -649,18 +649,18 @@ export class MrdTable {
                     else {
                         this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
                     }
-                } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), h("option", { value: "isEmpty", selected: dtdOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: dtdOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: inputType, class: "mrd-table__filter-input", value: String((_h = pf.value) !== null && _h !== void 0 ? _h : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
+                } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), h("option", { value: "isEmpty", selected: dtdOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: dtdOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: inputType, class: "mrd-table__filter-input", value: String((_g = pf.value) !== null && _g !== void 0 ? _g : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
         }
         return null;
     }
     renderFilterPopup() {
-        var _a, _b, _c, _d;
+        var _a;
         if (!this.openFilterCol || !this.pendingFilter)
             return null;
         const col = this.columns.find(c => this.colName(c) === this.openFilterCol);
         if (!col)
             return null;
-        const 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 : this.openFilterCol;
+        const label = (_a = col.label) !== null && _a !== void 0 ? _a : this.openFilterCol;
         const sortActive = this.sortField === this.openFilterCol;
         return (h("div", { class: "mrd-table__filter-popup", style: { top: `${this.popupPos.top}px`, left: `${this.popupPos.left}px` }, onClick: (e) => e.stopPropagation() }, h("div", { class: "mrd-table__filter-popup-header" }, h("span", { class: "mrd-table__filter-popup-title" }, label), h("button", { class: "mrd-table__filter-close", onClick: () => this.closeFilterPopup() }, "\u2715")), h("div", { class: "mrd-table__filter-section" }, h("div", { class: "mrd-table__filter-section-label" }, t('filter_sorting', this.locale)), h("div", { class: "mrd-table__filter-sort-buttons" }, h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'asc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'asc') }, "\u25B2 ", t('filter_ascending', this.locale)), h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'desc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'desc') }, "\u25BC ", t('filter_descending', this.locale)))), h("div", { class: "mrd-table__filter-divider" }), h("div", { class: "mrd-table__filter-section" }, h("div", { class: "mrd-table__filter-section-label" }, t('filter_section', this.locale)), this.renderFilterEditor(col)), h("div", { class: "mrd-table__filter-popup-footer" }, h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--clear", onClick: () => this.clearFilter() }, t('filter_clear', this.locale)), h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--apply", onClick: () => this.applyFilter() }, t('filter_apply', this.locale)))));
     }
@@ -687,13 +687,13 @@ export class MrdTable {
     }
     // ── Render: cell ──────────────────────────────────────────────────────────
     renderCell(col, row) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         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 dataType = (_a = col.dataType) !== null && _a !== void 0 ? _a : '';
         const isNumeric = col.type === 'FIELD' && numericTypes.has(dataType);
         const isFile = col.type === 'FIELD' && (dataType === 'FILE' || dataType === 'IMAGE');
         if (isFile) {
-            const name = (_d = (_c = col.field) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
+            const name = (_b = col.name) !== null && _b !== void 0 ? _b : '';
             const fileVal = row === null || row === void 0 ? void 0 : row[name];
             const href = fileVal === null || fileVal === void 0 ? void 0 : fileVal.href;
             const fileName = fileVal === null || fileVal === void 0 ? void 0 : fileVal.fileName;
@@ -703,7 +703,7 @@ export class MrdTable {
                 } }, 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 name = (_c = col.name) !== null && _c !== void 0 ? _c : '';
             const rawValue = name ? row === null || row === void 0 ? void 0 : row[name] : undefined;
             if (rawValue == null || rawValue === '')
                 return h("td", { class: "mrd-table__cell" });
@@ -727,12 +727,12 @@ export class MrdTable {
     renderTotalsRow() {
         if (!this.aggregations)
             return null;
-        if (!this.columns.some(c => { var _a; return c.type === 'FIELD' && ((_a = c.field) === null || _a === void 0 ? void 0 : _a.aggregate); }))
+        if (!this.columns.some(c => c.type === 'FIELD' && c.aggregate))
             return null;
         return (h("tfoot", null, h("tr", { class: "mrd-table__totals-row" }, this.columns.map(col => {
-            var _a, _b;
+            var _a;
             const val = this.renderAggregationValue(col);
-            const isNumeric = col.type === 'FIELD' && NUMERIC_TYPES.has((_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '');
+            const isNumeric = col.type === 'FIELD' && NUMERIC_TYPES.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
             return (h("td", { class: `mrd-table__totals-cell${isNumeric ? ' mrd-table__totals-cell--numeric' : ''}` }, val));
         }))));
     }
@@ -744,7 +744,7 @@ export class MrdTable {
         // ── Non-paginated mode ──────────────────────────────────────────────────
         if (this.totalElements === 0) {
             return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => {
-                var _a, _b, _c, _d;
+                var _a;
                 const name = this.colName(col);
                 const isFiltered = this.activeFilters.has(name);
                 const cls = [
@@ -752,7 +752,7 @@ export class MrdTable {
                     isFiltered ? 'mrd-table__header--filtered' : '',
                     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()));
+                return (h("th", { class: cls, onClick: this.filterMode ? (e) => this.handleFilterOpen(col, e) : undefined }, h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), 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(), this.renderJsonModal()));
         }
         // ── Paginated / virtual-scroll mode ────────────────────────────────────
@@ -785,7 +785,7 @@ export class MrdTable {
             }
         }
         return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
-            var _a, _b, _c, _d;
+            var _a;
             const name = this.colName(col);
             const isActive = this.sortField === name;
             const isFiltered = this.activeFilters.has(name);
@@ -796,7 +796,7 @@ export class MrdTable {
                 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: 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()));
+            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" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), 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() {

package/dist/collection/dev/api.js

@@ -102,106 +102,18 @@ async function apiSearchRelation(token, tenantCode, mostSignificantClass, query)
 
 /* =====================================================================
    LAYOUT MAPPERS
-   Translate flat API layout responses to nested ClientLayoutItem format
-   expected by mrd-form.
+   mrd-form and mrd-field now accept the flat API format directly.
+   No transformation needed — pass the raw layout through as-is.
    ===================================================================== */
 
 /**
- * Map a single flat API item to the nested ClientLayoutItem structure.
- * Used by both mapApiLayoutToMrdForm (form) and mapApiColumns (table).
- */
-function mapApiItem(item) {
-  if (item.type === 'FIELD') {
-    if (item.field) return item; // already nested — pass through
-    return {
-      type: 'FIELD',
-      field: {
-        name:         item.name,
-        label:        item.label,
-        dataType:     item.dataType,
-        required:     !!item.required,
-        multiple:     !!item.multiple,
-        header:       !!item.header,
-        defaultValue: item.defaultValue ?? null,
-        listItems:    item.listItems ?? null,
-        aggregate:    item.aggregate ?? null,
-      },
-    };
-  }
-  if (item.type === 'RELATION') {
-    if (item.relation) return item; // already nested — pass through
-    return {
-      type: 'RELATION',
-      relation: {
-        name:                 item.name,
-        label:                item.label,
-        relatedClass:         item.relatedClass,
-        mostSignificantClass: item.mostSignificantClass ?? null,
-        displayType:          item.editBehavior ?? 'SEARCH',
-        editBehavior:         item.editBehavior ?? null,
-        commonRelation:       item.commonRelation ?? null,
-        required:             !!item.required,
-        multiple:             !!item.multiple,
-        defaultValue:         item.defaultValue ?? null,
-      },
-    };
-  }
-  if (Array.isArray(item.items)) {
-    return { ...item, items: item.items.map(mapApiItem) };
-  }
-  return item;
-}
-
-/**
- * Map API layout (OBJECT_FORM_DASHBOARD shape) → ClientLayout for mrd-form.
- *
- * IMPORTANT: always map editBehavior and commonRelation from the API response —
- * omitting them causes relation fields to fall back to SEARCH mode.
- * _relationMeta must be keyed by BOTH relatedClass AND mostSignificantClass
- * because mrdSearch sends mostSignificantClass as the lookup key.
+ * Extract a ClientLayout from the raw API form response.
+ * The API sends flat items (name, dataType, relatedClass at root level)
+ * which mrd-form/mrd-field read directly.
  */
 function mapApiLayoutToMrdForm(raw) {
-  if (!raw || !Array.isArray(raw.items)) return raw;
-
-  function mapItem(item) {
-    if (item.type === 'FIELD') {
-      return {
-        type: 'FIELD',
-        field: {
-          name:         item.name,
-          label:        item.label,
-          dataType:     item.dataType,
-          required:     !!item.required,
-          multiple:     !!item.multiple,
-          header:       !!item.header,
-          defaultValue: item.defaultValue ?? null,
-          listItems:    item.listItems ?? null,
-        },
-      };
-    }
-    if (item.type === 'RELATION') {
-      return {
-        type: 'RELATION',
-        relation: {
-          name:                 item.name,
-          label:                item.label,
-          relatedClass:         item.relatedClass,
-          mostSignificantClass: item.mostSignificantClass ?? null,
-          displayType:          item.editBehavior ?? 'SEARCH',
-          editBehavior:         item.editBehavior ?? null,
-          commonRelation:       item.commonRelation ?? null,
-          required:             !!item.required,
-          multiple:             !!item.multiple,
-          defaultValue:         item.defaultValue ?? null,
-        },
-      };
-    }
-    // SECTION / GROUP — recurse into children
-    if (Array.isArray(item.items)) {
-      return { ...item, items: item.items.map(mapItem) };
-    }
-    return item;
-  }
-
-  return { items: raw.items.map(mapItem) };
+  if (!raw) return raw;
+  // Unwrap OBJECT_FORM_DASHBOARD: keep items at top level, drop type wrapper
+  if (Array.isArray(raw.items)) return raw;
+  return raw;
 }

package/dist/collection/dev/app.js

@@ -260,7 +260,7 @@ async function loadTable() {
     // Strip any ?page= from href so we control pagination ourselves
     _tableDataHref = dataHref.replace(/([?&])page=\d+/, '').replace(/\?$/, '');
 
-    const columns          = (view.values ?? []).map(mapApiItem);
+    const columns          = view.values ?? [];
     const defaultSort      = view.defaultSort ?? '';
     const viewLabel        = layoutItem?.label ?? viewKey ?? '';
     const alternativeViews = layoutItem?.alternativeViews ?? [];
@@ -407,7 +407,7 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
         const meta     = page0.page ?? {};
         const rows0    = Object.values(page0._embedded ?? {})[0] ?? [];
 
-        table.columns          = (newView.values ?? []).map(mapApiItem);
+        table.columns          = newView.values ?? [];
         table.defaultSort      = newDefaultSort;
         table.totalElements    = meta.totalElements ?? 0;
         table.pageSize         = meta.size ?? 20;
@@ -455,7 +455,7 @@ async function loadRecord(row) {
 
     const formHref = recordResp.body?._links?.form?.href ?? null;
     const layout   = await apiFetchForm(authGetToken(), _selectedTenant, _selectedType.pluralName, formHref);
-    renderForm(layout, recordResp.body, selfHref);
+    await renderForm(layout, recordResp.body, selfHref);
   } catch (err) {
     formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
   }
@@ -476,7 +476,7 @@ async function loadForm() {
 
   try {
     const layout = await apiFetchForm(authGetToken(), _selectedTenant, pluralName);
-    renderForm(layout);
+    await renderForm(layout);
   } catch (err) {
     formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
   }
@@ -489,21 +489,21 @@ async function loadForm() {
  * @param record   - existing record for edit mode (null = new record)
  * @param selfHref - absolute URL for PATCH; null = POST (new record)
  */
-function renderForm(layout, record = null, selfHref = null) {
+async function renderForm(layout, record = null, selfHref = null) {
   // Build relation metadata map keyed by both relatedClass and mostSignificantClass
   // so lookups work regardless of which value arrives in events (mrdSearch uses mostSignificantClass).
   _relationMeta = {};
   function collectRelations(items) {
     if (!Array.isArray(items)) return;
     items.forEach(item => {
-      if (item.type === 'RELATION' && item.relation) {
+      if (item.type === 'RELATION' && item.relatedClass) {
         const meta = {
-          name:                 item.relation.name,
-          mostSignificantClass: item.relation.mostSignificantClass,
+          name:                 item.name,
+          mostSignificantClass: item.mostSignificantClass,
         };
-        _relationMeta[item.relation.relatedClass] = meta;
-        if (item.relation.mostSignificantClass) {
-          _relationMeta[item.relation.mostSignificantClass] = meta;
+        _relationMeta[item.relatedClass] = meta;
+        if (item.mostSignificantClass) {
+          _relationMeta[item.mostSignificantClass] = meta;
         }
       }
       if (Array.isArray(item.items)) collectRelations(item.items);
@@ -534,12 +534,19 @@ function renderForm(layout, record = null, selfHref = null) {
   const formPanel = document.getElementById('panel-form');
   formPanel.innerHTML = `<mrd-form id="live-form" locale="${_locale}"></mrd-form>`;
 
-  customElements.whenDefined('mrd-form').then(() => {
-    const form = document.getElementById('live-form');
-    form.layout = layout;
-    if (record) form.values = initialValues;
+  const form = document.getElementById('live-form');
+  // Wait for Stencil to fully initialize this specific instance before setting props.
+  // componentOnReady() resolves after componentDidLoad — more reliable than customElements.whenDefined.
+  if (typeof form.componentOnReady === 'function') {
+    await form.componentOnReady();
+  } else {
+    await customElements.whenDefined('mrd-form');
+  }
+
+  form.layout = layout;
+  if (record) form.values = initialValues;
 
-    // Upload files immediately on selection; write binary URI back via setFieldValue
+  // Upload files immediately on selection; write binary URI back via setFieldValue
     form.addEventListener('mrdChange', async (e) => {
       const { name, value } = e.detail;
       if (!(value instanceof File)) return;
@@ -645,7 +652,6 @@ function renderForm(layout, record = null, selfHref = null) {
         console.error('[mrdFetchAll] failed:', err);
       }
     });
-  });
 }
 
 /* =====================================================================
@@ -745,6 +751,17 @@ document.addEventListener('DOMContentLoaded', async () => {
     logEvent('mrdDownload', e.detail);
   });
 
+  ftSection.addEventListener('mrdSearch', (e) => {
+    logEvent('mrdSearch', e.detail);
+    const { query, dataClass } = e.detail;
+    const mock = [
+      { id: '/data/demo/1', label: 'Alice Johnson',    description: 'Senior Engineer' },
+      { id: '/data/demo/2', label: 'Bob van der Berg', description: 'Product Manager' },
+      { id: '/data/demo/3', label: 'Carol Martínez',   description: 'UX Designer' },
+    ].filter(r => r.label.toLowerCase().includes(query.toLowerCase()));
+    ftSection.setSearchResults(mock, dataClass);
+  });
+
   authRestoreSession();
   await authHandleCallback();