@mmlogic/components 0.1.15 → 0.1.17

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

@@ -10,24 +10,51 @@ export class MrdDatetimeField {
         this.disabled = false;
         this.locale = navigator.language;
         this.error = '';
+        this.localValue = '';
         this.handleChange = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
+            const localVal = e.target.value;
+            this.localValue = localVal;
+            if (this.required && !validateRequired(localVal)) {
                 this.error = t('required', this.locale);
             }
             else {
                 this.error = '';
             }
-            this.mrdChange.emit({ name: this.name, value: val });
+            this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
         };
         this.handleBlur = (e) => {
-            const val = e.target.value;
-            this.mrdBlur.emit({ name: this.name, value: val });
+            const localVal = e.target.value;
+            this.mrdBlur.emit({ name: this.name, value: this.localToUtc(localVal) });
         };
     }
+    componentWillLoad() {
+        this.localValue = this.utcToLocal(this.value);
+    }
+    valueChanged(newVal) {
+        this.localValue = this.utcToLocal(newVal);
+    }
+    // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone (for datetime-local input)
+    utcToLocal(utcStr) {
+        if (!utcStr)
+            return '';
+        const d = new Date(utcStr);
+        if (isNaN(d.getTime()))
+            return '';
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    }
+    // "YYYY-MM-DDTHH:mm" local time → UTC ISO string (for API)
+    localToUtc(localStr) {
+        if (!localStr)
+            return '';
+        const d = new Date(localStr);
+        if (isNaN(d.getTime()))
+            return '';
+        return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
+    }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '79331514eedaf208598a440423da6c154d0d516c' }, h("div", { key: 'a02a65bdef03a4243b700a68e32722a30781fa45', class: "mrd-datetime-field" }, this.label && (h("label", { key: 'adcf653253f64e8686b33211da4a5e8597b0786a', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), h("input", { key: '49a9fba058d2857c476d8ff038766f8b19b21a41', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '6d0d822b7cce825121b4abc77425442eb2556d76', class: "mrd-datetime-field__error" }, this.error))));
+        return (h(Host, { key: '6052b08238484bee345ae4bb9b3025c7f2474c35' }, h("div", { key: 'f9073be4496e35a7d40405ae4e6a27a5c1607626', class: "mrd-datetime-field" }, this.label && (h("label", { key: '5933c3b2dfcae9bfad378441210ada6b625657a2', class: `mrd-datetime-field__label${this.required ? ' mrd-datetime-field__label--required' : ''}` }, this.label)), h("input", { key: '7a947b104c38960d2326a4877e4ca52db9fd9d84', class: `mrd-datetime-field__input${hasError ? ' mrd-datetime-field__input--error' : ''}`, type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'cea3dba7e14e18a3a08394ef3027b661f1808969', class: "mrd-datetime-field__error" }, this.error))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }
@@ -167,7 +194,8 @@ export class MrdDatetimeField {
     }
     static get states() {
         return {
-            "error": {}
+            "error": {},
+            "localValue": {}
         };
     }
     static get events() {
@@ -203,4 +231,10 @@ export class MrdDatetimeField {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }

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

@@ -186,8 +186,8 @@ export class MrdField {
                     "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-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;
+}
+