@mmlogic/components 0.1.14 → 0.1.16

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

@@ -30,6 +30,7 @@ export class MrdForm {
         this.formValues = {};
         this.errors = {};
         this.submitted = false;
+        this.initialValues = {};
         this.handleFieldChange = (e) => {
             const { name, value } = e.detail;
             const prevHref = this.getHref(this.formValues[name]);
@@ -80,8 +81,9 @@ export class MrdForm {
         };
     }
     componentWillLoad() {
-        var _a;
-        this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
+        var _a, _b;
+        this.initialValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
+        this.formValues = Object.assign({}, ((_b = this.values) !== null && _b !== void 0 ? _b : {}));
     }
     componentDidLoad() {
         // Apply reference pre-fill and emit mrdFetchAll for dependent DROPDOWN fields.
@@ -94,6 +96,7 @@ export class MrdForm {
     /** Sync formValues when the values prop is set from outside after mount
      *  (e.g. when pre-filling an existing record in edit mode). */
     valuesChanged(newValues) {
+        this.initialValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
         this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
         this.applyReferenceValue();
         this.errors = {};
@@ -221,10 +224,42 @@ export class MrdForm {
         this.errors = newErrors;
         return Object.keys(newErrors).length === 0;
     }
-    /** Build a clean submit payload containing only layout fields in API format.
-     *  - Only fields defined in the layout are included (system fields are excluded).
-     *  - Relation values stored as RelationSearchResult { id, label } are unwrapped
-     *    to just the href string (the `id`), matching what the API expects.
+    normalizeFieldValue(value) {
+        return (value === '' || value == null) ? null : value;
+    }
+    normalizeRelationValue(value) {
+        if (value == null || value === '')
+            return null;
+        if (typeof value === 'string')
+            return value || null;
+        if (Array.isArray(value)) {
+            return value.map(v => typeof v === 'object' && v !== null && 'id' in v ? v.id : String(v));
+        }
+        if (typeof value === 'object' && 'id' in value) {
+            return value.id || null;
+        }
+        return null;
+    }
+    deepEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a == null && b == null)
+            return true;
+        if (a == null || b == null)
+            return false;
+        if (Array.isArray(a) && Array.isArray(b)) {
+            if (a.length !== b.length)
+                return false;
+            const sa = [...a].sort();
+            const sb = [...b].sort();
+            return JSON.stringify(sa) === JSON.stringify(sb);
+        }
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    /** Build a submit payload containing only fields that changed relative to
+     *  initialValues. For a new record (POST) initialValues is empty, so every
+     *  non-null field is included. For edit (PATCH) only modified fields are sent,
+     *  including fields explicitly cleared to null.
      */
     buildSubmitPayload() {
         var _a, _b;
@@ -234,23 +269,21 @@ export class MrdForm {
             if (item.type === ClientLayoutItemType.FIELD && item.field) {
                 const name = item.field.name;
                 const value = this.formValues[name];
-                // Skip file/image fields that are still uploading (value is a File object)
                 if (value instanceof File)
                     continue;
-                // Omit empty strings for optional fields
-                if (value !== '')
-                    payload[name] = value !== null && value !== void 0 ? value : null;
+                const current = this.normalizeFieldValue(value);
+                const initial = this.normalizeFieldValue(this.initialValues[name]);
+                if (this.deepEqual(current, initial))
+                    continue;
+                payload[name] = current;
             }
             else if (item.type === ClientLayoutItemType.RELATION && item.relation) {
                 const name = item.relation.name;
-                const value = this.formValues[name];
-                if (value !== null && typeof value === 'object' && !Array.isArray(value) && 'id' in value) {
-                    // RelationSearchResult { id: href, label } → plain href
-                    payload[name] = value.id;
-                }
-                else if (value !== '' && value !== undefined) {
-                    payload[name] = value !== null && value !== void 0 ? value : null;
-                }
+                const current = this.normalizeRelationValue(this.formValues[name]);
+                const initial = this.normalizeRelationValue(this.initialValues[name]);
+                if (this.deepEqual(current, initial))
+                    continue;
+                payload[name] = current;
             }
         }
         return payload;
@@ -473,8 +506,8 @@ export class MrdForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ query: string; relatedClass: string }",
-                    "resolved": "{ query: string; relatedClass: string; }",
+                    "original": "{ name: string; query: string; relatedClass: string }",
+                    "resolved": "{ name: string; query: string; relatedClass: string; }",
                     "references": {}
                 }
             }, {

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

@@ -70,7 +70,7 @@ export class MrdRelationField {
                 this.isLoading = true;
                 this.showResults = true;
                 this.searchDebounce = setTimeout(() => {
-                    this.mrdSearch.emit({ query, relatedClass: this.mostSignificantClass });
+                    this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
                 }, 300);
             }
             else {
@@ -543,8 +543,8 @@ export class MrdRelationField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ query: string; relatedClass: string }",
-                    "resolved": "{ query: string; relatedClass: string; }",
+                    "original": "{ name: string; query: string; relatedClass: string }",
+                    "resolved": "{ name: string; query: string; relatedClass: string; }",
                     "references": {}
                 }
             }, {

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

@@ -17,6 +17,7 @@ export class MrdTable {
         this.pendingPages = new Set();
         this.debounceTimer = null;
         this.outsideClickHandler = null;
+        this.keydownHandler = null;
         // ── Props ──────────────────────────────────────────────────────────────────
         this.columns = [];
         /** Direct rows (non-paginated mode, used when totalElements === 0). */
@@ -55,6 +56,8 @@ export class MrdTable {
         this.popupPos = { top: 0, left: 0 };
         /** Current scroll offset of the scroll container — drives pagination footer. */
         this.scrollTop = 0;
+        /** Full text shown in the TEXTBLOCK expand modal (null = closed). */
+        this.textblockModal = null;
         this.handleScroll = (e) => {
             const scroller = e.currentTarget;
             const scrollTop = scroller.scrollTop;
@@ -131,6 +134,10 @@ export class MrdTable {
             document.removeEventListener('click', this.outsideClickHandler);
             this.outsideClickHandler = null;
         }
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
     }
     componentDidRender() {
         if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
@@ -275,7 +282,26 @@ export class MrdTable {
         const defaultOperator = (TEXT_TYPES.has(dataType) || dataType === 'RELATION')
             ? 'startsWith'
             : undefined;
-        this.pendingFilter = existing ? Object.assign({}, existing) : { field: name, dataType, operator: defaultOperator };
+        // For DATETIME, stored values are UTC ISO strings; convert back to local
+        // "YYYY-MM-DD" dates so the date inputs show what the user originally entered.
+        // If from and to cover the same local day it was an exact-date filter — restore
+        // to exact mode so the user sees the single-date input again.
+        if (dataType === 'DATETIME' && existing) {
+            const display = Object.assign({}, existing);
+            if (typeof display.from === 'string' && display.from)
+                display.from = this.utcISOToLocalDate(display.from);
+            if (typeof display.to === 'string' && display.to)
+                display.to = this.utcISOToLocalDateExclusiveEnd(display.to);
+            if (display.from && display.to && display.from === display.to) {
+                this.pendingFilter = Object.assign(Object.assign({}, display), { value: display.from, from: undefined, to: undefined });
+            }
+            else {
+                this.pendingFilter = display;
+            }
+        }
+        else {
+            this.pendingFilter = existing ? Object.assign({}, existing) : { field: name, dataType, operator: defaultOperator };
+        }
         this.openFilterCol = name;
         // Close on outside click — re-register to replace any stale handler
         if (this.outsideClickHandler)
@@ -295,6 +321,23 @@ export class MrdTable {
             this.outsideClickHandler = null;
         }
     }
+    openTextblockModal(text) {
+        this.textblockModal = text;
+        if (this.keydownHandler)
+            document.removeEventListener('keydown', this.keydownHandler);
+        this.keydownHandler = (ev) => {
+            if (ev.key === 'Escape')
+                this.closeTextblockModal();
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+    }
+    closeTextblockModal() {
+        this.textblockModal = 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 });
     }
@@ -318,18 +361,70 @@ export class MrdTable {
             return true;
         return false;
     }
+    // Convert a local "YYYY-MM-DD" date string to the UTC ISO string at the
+    // start of that local day (midnight). new Date(y, m, d) uses local time.
+    dateLocalToUTCStart(dateStr) {
+        if (!dateStr)
+            return dateStr;
+        const [year, month, day] = dateStr.split('-').map(Number);
+        return new Date(year, month - 1, day).toISOString().replace(/\.\d{3}Z$/, 'Z');
+    }
+    // Start of the day AFTER the given local date (exclusive range end).
+    dateLocalToUTCEndExclusive(dateStr) {
+        if (!dateStr)
+            return dateStr;
+        const [year, month, day] = dateStr.split('-').map(Number);
+        return new Date(year, month - 1, day + 1).toISOString().replace(/\.\d{3}Z$/, 'Z');
+    }
+    // Convert a stored UTC ISO string back to the local "YYYY-MM-DD" date.
+    utcISOToLocalDate(utcStr) {
+        if (!utcStr)
+            return utcStr;
+        const d = new Date(utcStr);
+        if (isNaN(d.getTime()))
+            return utcStr;
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    }
+    // The stored "to" value is the exclusive end (midnight of the next day).
+    // Subtract one day to recover the local date the user entered.
+    utcISOToLocalDateExclusiveEnd(utcStr) {
+        if (!utcStr)
+            return utcStr;
+        const d = new Date(utcStr);
+        if (isNaN(d.getTime()))
+            return utcStr;
+        d.setDate(d.getDate() - 1);
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    }
     applyFilter() {
         const f = this.pendingFilter;
         if (!(f === null || f === void 0 ? void 0 : f.field)) {
             this.closeFilterPopup();
             return;
         }
+        // For DATETIME fields the user enters local dates; convert to UTC ISO strings.
+        // Exact date → range covering the full local day (from = midnight, to = next midnight).
+        // "to" is always the exclusive end (midnight of the next local day).
+        let normalized = Object.assign({}, f);
+        if (f.dataType === 'DATETIME') {
+            if (typeof normalized.value === 'string' && normalized.value) {
+                normalized.from = this.dateLocalToUTCStart(normalized.value);
+                normalized.to = this.dateLocalToUTCEndExclusive(normalized.value);
+                normalized.value = undefined;
+            }
+            else {
+                if (typeof normalized.from === 'string' && normalized.from)
+                    normalized.from = this.dateLocalToUTCStart(normalized.from);
+                if (typeof normalized.to === 'string' && normalized.to)
+                    normalized.to = this.dateLocalToUTCEndExclusive(normalized.to);
+            }
+        }
         const next = new Map(this.activeFilters);
-        if (this.filterHasValue(f)) {
-            next.set(f.field, f);
+        if (this.filterHasValue(normalized)) {
+            next.set(normalized.field, normalized);
         }
         else {
-            next.delete(f.field);
+            next.delete(normalized.field);
         }
         this.activeFilters = next;
         this.closeFilterPopup();
@@ -374,7 +469,7 @@ export class MrdTable {
     }
     // ── Render: filter popup ───────────────────────────────────────────────────
     renderFilterEditor(col) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const pf = (_a = this.pendingFilter) !== null && _a !== void 0 ? _a : {};
         const dataType = this.colDataType(col);
         if (NO_FILTER_TYPES.has(dataType)) {
@@ -406,12 +501,14 @@ export class MrdTable {
             const rangeMode = pf.from !== undefined || pf.to !== undefined;
             return (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: `nm-${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: `nm-${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: "number", class: "mrd-table__filter-input", value: pf.value != null ? String(pf.value) : '', onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: "number", 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("span", { class: "mrd-table__filter-range-sep" }, "\u2013"), h("input", { type: "number", 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) })))));
         }
+        if (dataType === 'DATETIME') {
+            const rangeMode = pf.from !== undefined || pf.to !== undefined;
+            return (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) })))));
+        }
         if (DATE_TYPES.has(dataType)) {
-            const inputType = dataType === 'DATE' ? 'date'
-                : dataType === 'DATETIME' ? 'datetime-local'
-                    : 'time';
+            const inputType = dataType === 'DATE' ? 'date' : 'time';
             const rangeMode = pf.from !== undefined || pf.to !== undefined;
-            return (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 (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) })))));
         }
         return null;
     }
@@ -464,6 +561,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))) : ''));
         }
+        const TEXTBLOCK_MAX = 200;
+        if (dataType === 'TEXTBLOCK') {
+            const full = CellRenderer.render(col, row, this.locale);
+            if (full.length <= TEXTBLOCK_MAX) {
+                return h("td", { class: "mrd-table__cell" }, full);
+            }
+            const preview = full.slice(0, TEXTBLOCK_MAX) + '…';
+            return (h("td", { class: "mrd-table__cell" }, preview, h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openTextblockModal(full); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
+        }
         const value = CellRenderer.render(col, row, this.locale);
         return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
     }
@@ -478,8 +584,13 @@ export class MrdTable {
                 var _a, _b, _c, _d;
                 const name = this.colName(col);
                 const isFiltered = this.activeFilters.has(name);
-                return (h("th", { class: `mrd-table__header${isFiltered ? ' mrd-table__header--filtered' : ''}` }, 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 : ''), this.filterMode && (h("button", { class: `mrd-table__header-filter-btn${isFiltered ? ' mrd-table__header-filter-btn--active' : ''}`, onClick: (e) => this.handleFilterOpen(col, e) }, "\u25BE"))));
-            }))), 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.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()));
+                const cls = [
+                    'mrd-table__header',
+                    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()));
+            }))), 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.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()));
         }
         // ── Paginated / virtual-scroll mode ────────────────────────────────────
         // Derive the authoritative row count from loaded pages:
@@ -521,8 +632,16 @@ 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: () => 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 : ''), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅'), this.filterMode && (h("button", { class: `mrd-table__header-filter-btn${isFiltered ? ' mrd-table__header-filter-btn--active' : ''}`, onClick: (e) => { e.stopPropagation(); this.handleFilterOpen(col, e); } }, "\u25BE"))));
-        }))), 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 })))))), 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()));
+            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()));
+        }))), 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 })))))), 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() {
+        return (h("span", { class: "mrd-table__filter-icon", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "currentColor" }, h("path", { d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" }))));
+    }
+    renderTextblockModal() {
+        if (this.textblockModal === null)
+            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))));
     }
     static get is() { return "mrd-table"; }
     static get encapsulation() { return "scoped"; }
@@ -747,7 +866,8 @@ export class MrdTable {
             "openFilterCol": {},
             "pendingFilter": {},
             "popupPos": {},
-            "scrollTop": {}
+            "scrollTop": {},
+            "textblockModal": {}
         };
     }
     static get events() {

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

@@ -73,7 +73,7 @@
 }
 
 .mrd-table__sort-icon {
-  font-size: 0.65rem;
+  font-size: 0.85rem;
   opacity: 0.4;
   vertical-align: middle;
 }
@@ -84,6 +84,14 @@
   color: var(--mrd-color-primary);
 }
 
+.mrd-table__filter-icon {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  margin-left: var(--mrd-space-1);
+  color: var(--mrd-color-primary);
+}
+
 /* ── Data rows ─────────────────────────────────────────────────────────── */
 /* Background is set via inline style based on absolute row index,
    so zebra striping stays correct even with virtual spacer rows. */
@@ -273,37 +281,12 @@
   pointer-events: none;
 }
 
-/* ── Header: filtered indicator + filter button ─────────────────────────── */
+/* ── Header: filtered indicator ─────────────────────────────────────────── */
 .mrd-table__header--filtered {
   color: var(--mrd-color-primary);
   border-bottom-color: var(--mrd-color-primary);
 }
 
-.mrd-table__header-filter-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: var(--mrd-space-1);
-  padding: 0 3px;
-  background: transparent;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  color: var(--mrd-color-neutral-500);
-  font-size: 0.8rem;
-  line-height: 1;
-  vertical-align: middle;
-}
-
-.mrd-table__header-filter-btn:hover {
-  background: var(--mrd-color-neutral-200);
-  color: var(--mrd-color-neutral-800);
-}
-
-.mrd-table__header-filter-btn--active {
-  color: var(--mrd-color-primary);
-}
-
 /* ── Filter popup ───────────────────────────────────────────────────────── */
 .mrd-table__filter-popup {
   position: fixed;
@@ -433,6 +416,18 @@
   flex-shrink: 0;
 }
 
+.mrd-table__filter-range--stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-table__filter-range-label {
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
+  margin-bottom: 2px;
+}
+
 /* Radio group */
 .mrd-table__filter-radio-group {
   display: flex;
@@ -576,3 +571,69 @@
   height: 1rem;
 }
 
+/* ── TEXTBLOCK expand button ────────────────────────────────────────────── */
+.mrd-table__textblock-btn {
+  display: inline;
+  background: none;
+  border: none;
+  padding: 0 0 0 var(--mrd-space-1);
+  cursor: pointer;
+  color: var(--mrd-color-primary);
+  font-size: var(--mrd-font-size-sm);
+  font-family: inherit;
+  line-height: inherit;
+  vertical-align: middle;
+}
+
+.mrd-table__textblock-btn:hover {
+  color: var(--mrd-color-primary-dark);
+}
+
+/* ── TEXTBLOCK modal ────────────────────────────────────────────────────── */
+.mrd-table__modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: var(--mrd-z-modal, 300);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mrd-table__modal {
+  background: #fff;
+  border-radius: var(--mrd-radius-md, 0.5rem);
+  padding: var(--mrd-space-6);
+  max-width: min(600px, 90vw);
+  max-height: 70vh;
+  overflow-y: auto;
+  position: relative;
+  box-shadow: var(--mrd-shadow-lg);
+}
+
+.mrd-table__modal-close {
+  position: absolute;
+  top: var(--mrd-space-3);
+  right: var(--mrd-space-3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--mrd-color-text-muted, #6b7280);
+  padding: 0;
+}
+
+.mrd-table__modal-close:hover {
+  color: var(--mrd-color-text, #111827);
+}
+
+.mrd-table__modal-text {
+  margin: 0;
+  padding-right: var(--mrd-space-6);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: var(--mrd-font-size-sm);
+  line-height: 1.6;
+}
+

package/dist/collection/dev/app.js

@@ -431,14 +431,16 @@ function renderForm(layout, record = null, selfHref = null) {
 
     form.addEventListener('mrdSearch', async (e) => {
       logEvent('mrdSearch (live)', e.detail);
-      const { query, relatedClass } = e.detail;
-      const meta = _relationMeta[relatedClass];
-      if (!meta || !query || query.length < 2) return;
+      const { name, query, relatedClass } = e.detail;
+      if (!query || query.length < 2) return;
 
+      // relatedClass here is actually mostSignificantClass (the URL segment).
+      // Use name to find the exact field, avoiding collisions when multiple
+      // fields share the same mostSignificantClass (e.g. 'companies').
       try {
-        const results = await apiSearchRelation(authGetToken(), _selectedTenant, meta.mostSignificantClass, query);
-        const host = Array.from(document.querySelectorAll('mrd-relation-field'))
-          .find(el => el.name === meta.name);
+        const results = await apiSearchRelation(authGetToken(), _selectedTenant, relatedClass, query);
+        const host = Array.from(form.querySelectorAll('mrd-relation-field'))
+          .find(el => el.name === name);
         if (host && typeof host.setSearchResults === 'function') {
           host.setSearchResults(results);
         }

package/dist/collection/utils/format.js

@@ -20,7 +20,7 @@ export function formatPercentage(value, locale, decimalPrecision = 2) {
         style: 'percent',
         minimumFractionDigits: decimalPrecision,
         maximumFractionDigits: decimalPrecision,
-    }).format(value / 100);
+    }).format(value);
 }
 export function formatDate(value, locale) {
     if (!value)

package/dist/collection/utils/i18n.js

@@ -53,6 +53,9 @@ const translations = {
         filter_select_none: 'Geen',
         filter_search_value: 'Zoekwaarde...',
         filter_no_support: 'Geen filtering beschikbaar voor dit veldtype.',
+        // mrd-table textblock
+        textblock_show_more: 'Meer tonen',
+        close: 'Sluiten',
     },
     en: {
         required: 'This field is required',
@@ -108,6 +111,9 @@ const translations = {
         filter_select_none: 'None',
         filter_search_value: 'Search value...',
         filter_no_support: 'Filtering is not available for this field type.',
+        // mrd-table textblock
+        textblock_show_more: 'Show more',
+        close: 'Close',
     },
     ar: {
         required: 'هذا الحقل مطلوب',
@@ -163,6 +169,9 @@ const translations = {
         filter_select_none: 'لا شيء',
         filter_search_value: 'قيمة البحث...',
         filter_no_support: 'التصفية غير متاحة لهذا النوع من الحقول.',
+        // mrd-table textblock
+        textblock_show_more: 'عرض المزيد',
+        close: 'إغلاق',
     },
     fr: {
         required: 'Ce champ est obligatoire',
@@ -218,6 +227,9 @@ const translations = {
         filter_select_none: 'Aucun',
         filter_search_value: 'Valeur de recherche...',
         filter_no_support: "Le filtrage n'est pas disponible pour ce type de champ.",
+        // mrd-table textblock
+        textblock_show_more: 'Voir plus',
+        close: 'Fermer',
     },
 };
 export function t(key, locale) {

package/dist/components/format.js

@@ -1 +1 @@
-function n(n,i,t){return null==n||isNaN(n)?"":new Intl.NumberFormat(i,t).format(n)}function i(n,i,t){return null==n||isNaN(n)?"":new Intl.NumberFormat(t,{style:"currency",currency:i,minimumFractionDigits:2,maximumFractionDigits:2}).format(n)}function t(n,i,t=2){return null==n||isNaN(n)?"":new Intl.NumberFormat(i,{style:"percent",minimumFractionDigits:t,maximumFractionDigits:t}).format(n/100)}function e(n,i){if(!n)return"";const t="string"==typeof n?new Date(n):n;return isNaN(t.getTime())?"":new Intl.DateTimeFormat(i,{year:"numeric",month:"2-digit",day:"2-digit"}).format(t)}function r(n,i){if(!n)return"";const t="string"==typeof n?new Date(n):n;return isNaN(t.getTime())?"":new Intl.DateTimeFormat(i,{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit"}).format(t)}function u(n,i){if(!n)return"";const[t,e]=n.split(":").map(Number),r=new Date;return r.setHours(t,e,0,0),new Intl.DateTimeFormat(i,{hour:"2-digit",minute:"2-digit"}).format(r)}function a(n,i){var t,e,r,u;if(!n||!n.trim())return null;const a=new Intl.NumberFormat(i).formatToParts(1234567.89),o=null!==(e=null===(t=a.find((n=>"group"===n.type)))||void 0===t?void 0:t.value)&&void 0!==e?e:",",l=null!==(u=null===(r=a.find((n=>"decimal"===n.type)))||void 0===r?void 0:r.value)&&void 0!==u?u:".",s=n.replace(new RegExp(`\\${o}`,"g"),"").replace(new RegExp(`\\${l}`),".").replace("%","").trim(),c=parseFloat(s);return isNaN(c)?null:c}export{u as a,r as b,e as c,i as d,t as e,n as f,a as p}
+function n(n,i,t){return null==n||isNaN(n)?"":new Intl.NumberFormat(i,t).format(n)}function i(n,i,t){return null==n||isNaN(n)?"":new Intl.NumberFormat(t,{style:"currency",currency:i,minimumFractionDigits:2,maximumFractionDigits:2}).format(n)}function t(n,i,t=2){return null==n||isNaN(n)?"":new Intl.NumberFormat(i,{style:"percent",minimumFractionDigits:t,maximumFractionDigits:t}).format(n)}function e(n,i){if(!n)return"";const t="string"==typeof n?new Date(n):n;return isNaN(t.getTime())?"":new Intl.DateTimeFormat(i,{year:"numeric",month:"2-digit",day:"2-digit"}).format(t)}function r(n,i){if(!n)return"";const t="string"==typeof n?new Date(n):n;return isNaN(t.getTime())?"":new Intl.DateTimeFormat(i,{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit"}).format(t)}function u(n,i){if(!n)return"";const[t,e]=n.split(":").map(Number),r=new Date;return r.setHours(t,e,0,0),new Intl.DateTimeFormat(i,{hour:"2-digit",minute:"2-digit"}).format(r)}function a(n,i){var t,e,r,u;if(!n||!n.trim())return null;const a=new Intl.NumberFormat(i).formatToParts(1234567.89),o=null!==(e=null===(t=a.find((n=>"group"===n.type)))||void 0===t?void 0:t.value)&&void 0!==e?e:",",l=null!==(u=null===(r=a.find((n=>"decimal"===n.type)))||void 0===r?void 0:r.value)&&void 0!==u?u:".",s=n.replace(new RegExp(`\\${o}`,"g"),"").replace(new RegExp(`\\${l}`),".").replace("%","").trim(),c=parseFloat(s);return isNaN(c)?null:c}export{u as a,r as b,e as c,i as d,t as e,n as f,a as p}