@mmlogic/components 0.3.11 → 0.4.1

package/dist/collection/components/{mrd-table → table/mrd-table}/mrd-table.js

@@ -1,28 +1,30 @@
-import { h, Host } from "@stencil/core";
-import { CellRenderer } from "../../utils/cell-renderer";
-import { t } from "../../utils/i18n";
-import { formatNumber, formatPercentage, formatCurrency } from "../../utils/format";
-const BUFFER = 10;
-/** Wacht deze tijd (ms) na het laatste scroll-event voordat pagina's worden
- *  aangevraagd. Pagina's die de gebruiker snel voorbij scrollt worden zo geskipt. */
-const REQUEST_DEBOUNCE_MS = 150;
+import { h, Host, writeTask } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { buildListPath } from "../../../utils/query-params";
+import { TEXT_TYPES, NON_INTERACTIVE_TYPES, parseDefaultSort, buildSortParam, buildTableQueryParams, buildAggregationQs, filterHasValue, normalizeDatetimeFilter, datetimeFilterToDisplay, } from "./table-query";
+import { FilterIcon, TableCell, TotalsRow, TextblockModal, JsonModal, Toolbar } from "./table-parts";
+import { FilterPopup } from "./table-filter-popup";
+import { REQUEST_DEBOUNCE_MS, REQUEST_TIMEOUT_MS, MAX_RETRY_ATTEMPTS, visibleCount, computeWindow, pageRange, getRowFromPages, computeEffectiveTotal, isTotalKnownFromPages, getStalePages, } from "./virtual-scroll";
+/** How often (ms) to scan outstanding page requests for staleness. */
+const STALE_CHECK_INTERVAL_MS = 2000;
 /** Breedte van de filterpopup in px — voor overflow-correctie. */
 const POPUP_WIDTH = 280;
-const TEXT_TYPES = new Set(['TEXT', 'TEXTBLOCK', 'EMAIL', 'HYPERLINK']);
-const NUMERIC_TYPES = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
-const DATE_TYPES = new Set(['DATE', 'DATETIME', 'TIME']);
-const NO_FILTER_TYPES = new Set(['FILE', 'IMAGE']);
-/** Column types that cannot be sorted or filtered (not stored in PostgreSQL). */
-const NON_INTERACTIVE_TYPES = new Set(['LONGTEXT', 'JSON', 'FILE', 'IMAGE']);
 export class MrdTable {
     constructor() {
         // ── Non-state internals ────────────────────────────────────────────────────
         this.pendingPages = new Set();
         this.debounceTimer = null;
+        /** Timestamp of the last mrdLoadPage emission per outstanding page — drives stale-request detection. */
+        this.requestedAt = new Map();
+        /** Retry count per page since it first became stale. */
+        this.retryAttempts = new Map();
+        this.staleCheckTimer = null;
         this.outsideClickHandler = null;
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
         this.viewPopoverClickHandler = null;
+        /** Guards against scheduling more than one column-width measurement per freeze. */
+        this.colWidthMeasureScheduled = false;
         // ── Props ──────────────────────────────────────────────────────────────────
         /** The VIEW or RELATED_VIEW layout item. Contains view config, dataClass, fromClass, actions etc. */
         this.item = null;
@@ -39,11 +41,16 @@ export class MrdTable {
         this.rowHeight = 36;
         /** Height of the scroll container in px. */
         this.tableHeight = 500;
+        /** Time (ms) to wait for setPage() before retrying a page request; after
+         *  MAX_RETRY_ATTEMPTS retries the page is marked failed (see failedPages). */
+        this.requestTimeoutMs = REQUEST_TIMEOUT_MS;
         // ── Internal state ─────────────────────────────────────────────────────────
         /** Index into allViews[] for the currently displayed view. 0 = primary, 1+ = alternatives. */
         this.activeViewIdx = 0;
         this.loadedPages = new Map();
         this.requestedPages = new Set();
+        /** Pages that timed out MAX_RETRY_ATTEMPTS times — rendered as a retry row instead of shimmer. */
+        this.failedPages = new Set();
         this.renderStart = 0;
         this.renderEnd = 0;
         this.colWidths = [];
@@ -79,13 +86,10 @@ export class MrdTable {
         this.minKnownTotal = 0;
         this.handleScroll = (e) => {
             const scroller = e.currentTarget;
-            const scrollTop = scroller.scrollTop;
-            const total = this.baseTotal;
-            const visStart = Math.floor(scrollTop / this.rowHeight);
-            const visEnd = Math.min(visStart + this.visibleCount(), total - 1);
-            this.scrollTop = scrollTop;
-            this.renderStart = Math.max(0, visStart - BUFFER);
-            this.renderEnd = Math.min(total - 1, visEnd + BUFFER);
+            const { renderStart, renderEnd } = computeWindow(scroller.scrollTop, this.rowHeight, this.tableHeight, this.baseTotal);
+            this.scrollTop = scroller.scrollTop;
+            this.renderStart = renderStart;
+            this.renderEnd = renderEnd;
             this.requestPagesForWindow(this.renderStart, this.renderEnd);
         };
     }
@@ -105,18 +109,14 @@ export class MrdTable {
         var _a, _b, _c;
         this.applyDefaultSort((_c = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.defaultSort) !== null && _c !== void 0 ? _c : '');
     }
+    componentDidLoad() {
+        this.staleCheckTimer = setInterval(() => this.checkStalePages(), STALE_CHECK_INTERVAL_MS);
+    }
     // ── Helpers ────────────────────────────────────────────────────────────────
     applyDefaultSort(defaultSort) {
-        var _a;
-        if (defaultSort) {
-            const parts = defaultSort.split(',');
-            this.sortField = parts[0].trim();
-            this.sortDir = ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.trim()) === 'desc' ? 'desc' : 'asc';
-        }
-        else {
-            this.sortField = '';
-            this.sortDir = 'asc';
-        }
+        const { field, dir } = parseDefaultSort(defaultSort);
+        this.sortField = field;
+        this.sortDir = dir;
     }
     // ── Public API ─────────────────────────────────────────────────────────────
     /**
@@ -132,7 +132,11 @@ export class MrdTable {
         this.pendingPages.clear();
         this.loadedPages = new Map();
         this.requestedPages = new Set();
+        this.failedPages = new Set();
+        this.requestedAt.clear();
+        this.retryAttempts.clear();
         this.colWidths = [];
+        this.colWidthMeasureScheduled = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         // Always fill the visible viewport on init — totalElements may be stale from a
@@ -146,7 +150,7 @@ export class MrdTable {
         this.aggregationsPending = true;
         this.minKnownTotal = 0;
         // Always request page 0 — totalElements may be unknown (0) on first load.
-        this.mrdLoadPage.emit({ page: 0, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(0) });
+        this.emitLoadPage(0);
         this.requestedPages = new Set([0]);
     }
     /**
@@ -177,6 +181,13 @@ export class MrdTable {
         const next = new Map(this.loadedPages);
         next.set(pageNumber, rows);
         this.loadedPages = next;
+        this.requestedAt.delete(pageNumber);
+        this.retryAttempts.delete(pageNumber);
+        if (this.failedPages.has(pageNumber)) {
+            const nextFailed = new Set(this.failedPages);
+            nextFailed.delete(pageNumber);
+            this.failedPages = nextFailed;
+        }
         if (pageNumber === 0 && this.aggregationsPending) {
             this.aggregationsPending = false;
             const hasAggColumns = this.columns.some(c => c.type === 'FIELD' && c.aggregate);
@@ -195,6 +206,10 @@ export class MrdTable {
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
+        if (this.staleCheckTimer !== null) {
+            clearInterval(this.staleCheckTimer);
+            this.staleCheckTimer = null;
+        }
         if (this.outsideClickHandler) {
             document.removeEventListener('click', this.outsideClickHandler);
             this.outsideClickHandler = null;
@@ -213,21 +228,34 @@ export class MrdTable {
         }
     }
     componentDidRender() {
-        if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
-            const ths = this.el.querySelectorAll('.mrd-table__header');
-            if (ths.length > 0) {
-                this.colWidths = Array.from(ths).map(th => th.offsetWidth);
-            }
+        // Freeze header widths once the first data page has rendered. The measurement
+        // reads offsetWidth and writes the colWidths @State, which would trigger a
+        // re-render *during* the render cycle if done synchronously here. Defer it to a
+        // writeTask so the state mutation happens outside the render pass (avoids the
+        // Stencil "state/prop changed during rendering" warning and potential loops).
+        if (this.colWidths.length === 0 &&
+            !this.colWidthMeasureScheduled &&
+            this.loadedPages.size > 0 &&
+            this.totalElements > 0) {
+            this.colWidthMeasureScheduled = true;
+            writeTask(() => {
+                this.colWidthMeasureScheduled = false;
+                // Re-check: state may have changed (e.g. a reset) between scheduling and running.
+                if (this.colWidths.length !== 0)
+                    return;
+                const ths = this.el.querySelectorAll('.mrd-table__header');
+                if (ths.length > 0) {
+                    this.colWidths = Array.from(ths).map(th => th.offsetWidth);
+                }
+            });
         }
     }
     // ── Paging / scroll helpers ────────────────────────────────────────────────
     visibleCount() {
-        return Math.ceil(this.tableHeight / this.rowHeight);
+        return visibleCount(this.tableHeight, this.rowHeight);
     }
     sortParam() {
-        if (!this.sortField)
-            return '';
-        return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
+        return buildSortParam(this.sortField, this.sortDir);
     }
     /** Stable ordered list: primary view first, then alternatives (from the item prop). */
     get allViews() {
@@ -253,14 +281,16 @@ export class MrdTable {
      *  VIEW:         /excel/{dataClass}
      *  RELATED_VIEW: /excel/{fromClass}/{parentId}/{dataClass}  */
     buildExcelPath() {
-        var _a, _b, _c, _d;
+        var _a;
         const v = this.allViews[this.activeViewIdx];
         if (!v)
             return '';
-        if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW') {
-            return `/excel/${(_b = v.fromClass) !== null && _b !== void 0 ? _b : ''}/${this.parentId}/${(_c = v.dataClass) !== null && _c !== void 0 ? _c : ''}`;
-        }
-        return `/excel/${(_d = v.dataClass) !== null && _d !== void 0 ? _d : ''}`;
+        return '/excel' + buildListPath({
+            isRelatedView: ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW',
+            fromClass: v.fromClass,
+            parentId: this.parentId,
+            dataClass: v.dataClass,
+        });
     }
     buildActionDetail(action, basicType) {
         var _a, _b, _c;
@@ -280,80 +310,28 @@ export class MrdTable {
      *  VIEW:         /{dataClass}
      *  RELATED_VIEW: /{fromClass}/{parentId}/{dataClass}  */
     buildDataPath() {
-        var _a, _b, _c, _d;
+        var _a;
         const v = this.allViews[this.activeViewIdx];
         if (!v)
             return '';
-        if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW') {
-            return `/${(_b = v.fromClass) !== null && _b !== void 0 ? _b : ''}/${this.parentId}/${(_c = v.dataClass) !== null && _c !== void 0 ? _c : ''}`;
-        }
-        return `/${(_d = v.dataClass) !== null && _d !== void 0 ? _d : ''}`;
+        return buildListPath({
+            isRelatedView: ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW',
+            fromClass: v.fromClass,
+            parentId: this.parentId,
+            dataClass: v.dataClass,
+        });
     }
     /** Build query params for a page request from current sort, view filters, filterClass and active column filters. */
     buildQueryParams(page) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a;
         const v = this.allViews[this.activeViewIdx];
-        const p = new URLSearchParams();
-        if (page > 0)
-            p.set('page', String(page));
-        const sort = this.sortParam();
-        if (sort)
-            p.set('sort', sort);
-        const filterClass = v === null || v === void 0 ? void 0 : v.filterClass;
-        if (filterClass)
-            p.set('type', filterClass);
-        for (const f of ((_b = (_a = v === null || v === void 0 ? void 0 : v.view) === null || _a === void 0 ? void 0 : _a.filter) !== null && _b !== void 0 ? _b : [])) {
-            if (!f.name)
-                continue;
-            if (f.operator === 'EMPTY') {
-                p.set(f.name, '');
-                continue;
-            }
-            if (f.operator === 'NOT_EMPTY') {
-                p.set(f.name + '_notempty', 'true');
-                continue;
-            }
-            if (f.operator === 'STARTS_WITH') {
-                p.set(f.name + '_startswith', String((_c = f.value) !== null && _c !== void 0 ? _c : ''));
-                continue;
-            }
-            if (f.operator === 'FROM') {
-                p.set(f.name + '_from', String((_d = f.value) !== null && _d !== void 0 ? _d : ''));
-                continue;
-            }
-            if (f.operator === 'TO') {
-                p.set(f.name + '_to', String((_e = f.value) !== null && _e !== void 0 ? _e : ''));
-                continue;
-            }
-            if (f.value != null) {
-                p.set(f.name, String(f.value));
-            }
-        }
-        for (const f of this.activeFilters.values()) {
-            if (f.operator === 'isEmpty') {
-                p.set(f.field, '');
-                continue;
-            }
-            if (f.operator === 'isNotEmpty') {
-                p.set(f.field + '_notempty', 'true');
-                continue;
-            }
-            if (f.operator === 'startsWith') {
-                p.set(f.field + '_startswith', String((_f = f.value) !== null && _f !== void 0 ? _f : ''));
-                continue;
-            }
-            if ((_g = f.values) === null || _g === void 0 ? void 0 : _g.length) {
-                p.set(f.field, f.values.join(','));
-                continue;
-            }
-            if (f.value != null)
-                p.set(f.field, String(f.value));
-            if (f.from != null)
-                p.set(f.field + '_from', String(f.from));
-            if (f.to != null)
-                p.set(f.field + '_to', String(f.to));
-        }
-        return p.toString();
+        return buildTableQueryParams({
+            page,
+            sort: this.sortParam(),
+            filterClass: v === null || v === void 0 ? void 0 : v.filterClass,
+            viewFilters: (_a = v === null || v === void 0 ? void 0 : v.view) === null || _a === void 0 ? void 0 : _a.filter,
+            activeFilters: this.activeFilters.values(),
+        });
     }
     get columns() {
         var _a, _b, _c;
@@ -408,11 +386,7 @@ export class MrdTable {
     isTotalKnown() {
         if (this.aggregationsTotal != null)
             return true;
-        for (const rows of this.loadedPages.values()) {
-            if (rows.length < this.pageSize)
-                return true;
-        }
-        return false;
+        return isTotalKnownFromPages(this.loadedPages, this.pageSize);
     }
     /** Effective total: aggregations-response > totalElements prop > minKnownTotal from setPage(). */
     get baseTotal() {
@@ -423,61 +397,9 @@ export class MrdTable {
         return this.minKnownTotal;
     }
     // ── Aggregation helpers ────────────────────────────────────────────────────
-    buildAggregationParams() {
-        var _a;
-        const groups = { sum: [], avg: [], count: [] };
-        for (const col of this.columns) {
-            if (col.type !== 'FIELD' || !col.aggregate)
-                continue;
-            const fn = col.aggregate.toLowerCase();
-            if (fn in groups)
-                groups[fn].push((_a = col.name) !== null && _a !== void 0 ? _a : '');
-        }
-        const params = {};
-        if (groups.sum.length)
-            params.sum = groups.sum;
-        if (groups.avg.length)
-            params.avg = groups.avg;
-        if (groups.count.length)
-            params.count = groups.count;
-        return Object.keys(params).length > 0 ? params : null;
-    }
-    buildAggregationQs() {
-        var _a, _b, _c;
-        const p = new URLSearchParams(this.buildQueryParams(0));
-        p.delete('page');
-        p.delete('sort');
-        const groups = this.buildAggregationParams();
-        if ((_a = groups === null || groups === void 0 ? void 0 : groups.sum) === null || _a === void 0 ? void 0 : _a.length)
-            p.set('sum', groups.sum.join(','));
-        if ((_b = groups === null || groups === void 0 ? void 0 : groups.avg) === null || _b === void 0 ? void 0 : _b.length)
-            p.set('avg', groups.avg.join(','));
-        if ((_c = groups === null || groups === void 0 ? void 0 : groups.count) === null || _c === void 0 ? void 0 : _c.length)
-            p.set('count', groups.count.join(','));
-        return p.toString();
-    }
     emitLoadAggregations() {
-        this.mrdLoadAggregations.emit({ path: this.buildDataPath(), qs: this.buildQueryParams(0), aggQs: this.buildAggregationQs() });
-    }
-    renderAggregationValue(col) {
-        var _a;
-        if (col.type !== 'FIELD' || !col.aggregate || !this.aggregations)
-            return '';
-        const fn = col.aggregate.toLowerCase();
-        const aggData = this.aggregations[fn];
-        const val = typeof aggData === 'object' && aggData !== null
-            ? aggData[(_a = col.name) !== null && _a !== void 0 ? _a : '']
-            : undefined;
-        if (val == null)
-            return '';
-        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.currencyCode)
-            return formatCurrency(val, col.currencyCode, this.locale);
-        return formatNumber(val, this.locale);
+        const qs = this.buildQueryParams(0);
+        this.mrdLoadAggregations.emit({ path: this.buildDataPath(), qs, aggQs: buildAggregationQs(qs, this.columns) });
     }
     // ── Reset pagination ───────────────────────────────────────────────────────
     /** Reset pagination state and scroll to top (used after sort or filter change). */
@@ -489,7 +411,11 @@ export class MrdTable {
         this.pendingPages.clear();
         this.loadedPages = new Map();
         this.requestedPages = new Set();
+        this.failedPages = new Set();
+        this.requestedAt.clear();
+        this.retryAttempts.clear();
         this.colWidths = [];
+        this.colWidthMeasureScheduled = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         this.minKnownTotal = 0;
@@ -518,15 +444,19 @@ export class MrdTable {
         this.resetPages();
         this.emitPagesForWindow(this.renderStart, this.renderEnd);
     }
+    /** Emits mrdLoadPage for a page and records the request timestamp for stale-request detection. */
+    emitLoadPage(page) {
+        this.mrdLoadPage.emit({ page, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(page) });
+        this.requestedAt.set(page, Date.now());
+    }
     emitPagesForWindow(start, end) {
-        const firstPage = Math.floor(start / this.pageSize);
-        const lastPage = Math.floor(end / this.pageSize);
+        const { firstPage, lastPage } = pageRange(start, end, this.pageSize);
         const next = new Set(this.requestedPages);
         let changed = false;
         for (let p = firstPage; p <= lastPage; p++) {
             if (!this.loadedPages.has(p) && !next.has(p)) {
                 next.add(p);
-                this.mrdLoadPage.emit({ page: p, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(p) });
+                this.emitLoadPage(p);
                 changed = true;
             }
         }
@@ -534,13 +464,10 @@ export class MrdTable {
             this.requestedPages = next;
     }
     getRow(i) {
-        var _a;
-        const page = this.loadedPages.get(Math.floor(i / this.pageSize));
-        return (_a = page === null || page === void 0 ? void 0 : page[i % this.pageSize]) !== null && _a !== void 0 ? _a : null;
+        return getRowFromPages(this.loadedPages, i, this.pageSize);
     }
     requestPagesForWindow(start, end) {
-        const firstPage = Math.floor(start / this.pageSize);
-        const lastPage = Math.floor(end / this.pageSize);
+        const { firstPage, lastPage } = pageRange(start, end, this.pageSize);
         let anyNew = false;
         for (let p = firstPage; p <= lastPage; p++) {
             if (!this.loadedPages.has(p) && !this.requestedPages.has(p) && !this.pendingPages.has(p)) {
@@ -568,13 +495,53 @@ export class MrdTable {
             if (pageEnd < this.renderStart || pageStart > this.renderEnd)
                 continue;
             next.add(page);
-            this.mrdLoadPage.emit({ page, sort: this.sortParam(), path: this.buildDataPath(), qs: this.buildQueryParams(page) });
+            this.emitLoadPage(page);
             changed = true;
         }
         this.pendingPages.clear();
         if (changed)
             this.requestedPages = next;
     }
+    /** Scans outstanding requests for staleness: retries up to MAX_RETRY_ATTEMPTS times,
+     *  then gives up and marks the page as failed (rendered as a retry row). */
+    checkStalePages() {
+        var _a;
+        if (this.requestedAt.size === 0)
+            return;
+        const stale = getStalePages(this.requestedAt, Date.now(), this.requestTimeoutMs)
+            .filter(p => !this.loadedPages.has(p));
+        if (stale.length === 0)
+            return;
+        let nextFailed = null;
+        for (const page of stale) {
+            const attempts = (_a = this.retryAttempts.get(page)) !== null && _a !== void 0 ? _a : 0;
+            if (attempts < MAX_RETRY_ATTEMPTS) {
+                this.retryAttempts.set(page, attempts + 1);
+                this.emitLoadPage(page);
+            }
+            else {
+                this.requestedAt.delete(page);
+                this.retryAttempts.delete(page);
+                if (!nextFailed)
+                    nextFailed = new Set(this.failedPages);
+                nextFailed.add(page);
+                this.mrdPageError.emit({ page });
+            }
+        }
+        if (nextFailed)
+            this.failedPages = nextFailed;
+    }
+    /** Manually retry a page the user gave up on (clicked the retry row). */
+    retryPage(page) {
+        const next = new Set(this.failedPages);
+        next.delete(page);
+        this.failedPages = next;
+        this.retryAttempts.delete(page);
+        this.emitLoadPage(page);
+        const requested = new Set(this.requestedPages);
+        requested.add(page);
+        this.requestedPages = requested;
+    }
     // ── Filter helpers ─────────────────────────────────────────────────────────
     handleFilterToggle() {
         this.filterMode = !this.filterMode;
@@ -602,17 +569,7 @@ export class MrdTable {
         // 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 && existing.operator !== 'isEmpty' && existing.operator !== 'isNotEmpty') {
-            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;
-            }
+            this.pendingFilter = datetimeFilterToDisplay(existing);
         }
         else {
             this.pendingFilter = existing ? Object.assign({}, existing) : { field: name, dataType, operator: defaultOperator };
@@ -678,81 +635,15 @@ export class MrdTable {
         const current = (_b = (_a = this.pendingFilter) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
         this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { values: checked ? [...current, key] : current.filter(k => k !== key) });
     }
-    filterHasValue(f) {
-        if (f.operator === 'isEmpty' || f.operator === 'isNotEmpty')
-            return true;
-        if (f.values !== undefined && f.values.length > 0)
-            return true;
-        if (f.value != null && f.value !== '')
-            return true;
-        if (typeof f.value === 'boolean')
-            return true;
-        if (f.from != null && f.from !== '')
-            return true;
-        if (f.to != null && f.to !== '')
-            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' && f.operator !== 'isEmpty' && f.operator !== 'isNotEmpty') {
-            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 normalized = normalizeDatetimeFilter(f);
         const next = new Map(this.activeFilters);
-        if (this.filterHasValue(normalized)) {
+        if (filterHasValue(normalized)) {
             next.set(normalized.field, normalized);
         }
         else {
@@ -807,140 +698,53 @@ export class MrdTable {
     toggleViewPopover(e) {
         e.stopPropagation();
         if (this.viewPopoverOpen) {
-            this.viewPopoverOpen = false;
-            if (this.viewPopoverClickHandler) {
-                document.removeEventListener('click', this.viewPopoverClickHandler);
-                this.viewPopoverClickHandler = null;
-            }
+            this.closeViewPopover();
             return;
         }
         this.viewPopoverOpen = true;
-        this.viewPopoverClickHandler = () => {
-            this.viewPopoverOpen = false;
+        this.viewPopoverClickHandler = () => this.closeViewPopover();
+        document.addEventListener('click', this.viewPopoverClickHandler);
+    }
+    closeViewPopover() {
+        this.viewPopoverOpen = false;
+        if (this.viewPopoverClickHandler) {
             document.removeEventListener('click', this.viewPopoverClickHandler);
             this.viewPopoverClickHandler = null;
-        };
-        document.addEventListener('click', this.viewPopoverClickHandler);
+        }
     }
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
         var _a;
-        const filterCount = this.activeFilters.size;
-        const actions = this.tableActions;
-        const allViews = this.allViews;
-        const hasActions = actions.length > 0;
-        const hasViewSwitcher = allViews.length > 1;
-        return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), h("span", { class: "mrd-table__action-tooltip" }, this.filterMode ? t('table_filter_hide', this.locale) : t('table_filter', this.locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', this.locale)})` : '')), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, h("div", { class: "mrd-table__view-switcher" }, h("button", { class: "mrd-table__view-arrow", "aria-label": "Previous view", onClick: () => this.handleViewSwitch((this.activeViewIdx - 1 + allViews.length) % allViews.length) }, "\u25C0"), h("div", { class: "mrd-table__view-title-wrap" }, h("button", { class: "mrd-table__view-title", onClick: (e) => this.toggleViewPopover(e) }, (_a = allViews[this.activeViewIdx]) === null || _a === void 0 ? void 0 : _a.label), this.viewPopoverOpen && (h("div", { class: "mrd-table__view-popover", onClick: (e) => e.stopPropagation() }, allViews.map((v, i) => (h("button", { key: String(i), class: `mrd-table__view-popover-item${i === this.activeViewIdx ? ' mrd-table__view-popover-item--active' : ''}`, onClick: () => {
-                if (i !== this.activeViewIdx)
-                    this.handleViewSwitch(i);
-                this.viewPopoverOpen = false;
-                if (this.viewPopoverClickHandler) {
-                    document.removeEventListener('click', this.viewPopoverClickHandler);
-                    this.viewPopoverClickHandler = null;
-                }
-            } }, v.label)))))), h("button", { class: "mrd-table__view-arrow", "aria-label": "Next view", onClick: () => this.handleViewSwitch((this.activeViewIdx + 1) % allViews.length) }, "\u25B6")))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
-            var _a, _b, _c;
-            const createTypes = a.action === 'create' ? (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes : null;
-            if (createTypes === null || createTypes === void 0 ? void 0 : createTypes.length) {
-                return (h("div", { class: "mrd-table__create-picker-wrap", key: `action-${a.action}` }, h("button", { class: `mrd-table__action mrd-table__action--${(_b = a.variant) !== null && _b !== void 0 ? _b : 'secondary'}`, onClick: () => this.toggleCreatePicker() }, a.icon
-                    ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
-                    : a.label, h("span", { class: "mrd-table__action-tooltip" }, a.label)), this.createPickerOpen && (h("div", { class: "mrd-table__create-picker" }, createTypes.map(ct => (h("button", { key: ct.type, class: "mrd-table__create-picker-item", onClick: () => {
-                        this.mrdAction.emit(this.buildActionDetail('create', ct.type));
-                        this.closeCreatePicker();
-                    } }, ct.label)))))));
-            }
-            return (h("button", { key: `action-${a.action}`, class: `mrd-table__action mrd-table__action--${(_c = a.variant) !== null && _c !== void 0 ? _c : 'secondary'}`, disabled: a.disabled, onClick: () => this.mrdAction.emit(this.buildActionDetail(a.action)) }, a.icon
-                ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
-                : a.label, h("span", { class: "mrd-table__action-tooltip" }, a.label)));
-        })))));
+        return (h(Toolbar, { locale: this.locale, filterMode: this.filterMode, filterCount: this.activeFilters.size, actions: this.tableActions, views: this.allViews, activeViewIdx: this.activeViewIdx, viewPopoverOpen: this.viewPopoverOpen, createPickerOpen: this.createPickerOpen, createTypes: (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes, cb: {
+                onFilterToggle: () => this.handleFilterToggle(),
+                onClearAllFilters: () => this.clearAllFilters(),
+                onViewSwitch: idx => this.handleViewSwitch(idx),
+                onToggleViewPopover: e => this.toggleViewPopover(e),
+                onCloseViewPopover: () => this.closeViewPopover(),
+                onToggleCreatePicker: () => this.toggleCreatePicker(),
+                onCreate: basicType => {
+                    this.mrdAction.emit(this.buildActionDetail('create', basicType));
+                    this.closeCreatePicker();
+                },
+                onAction: action => this.mrdAction.emit(this.buildActionDetail(action)),
+            } }));
     }
     // ── Render: filter popup ───────────────────────────────────────────────────
-    renderFilterEditor(col) {
-        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)) {
-            return h("p", { class: "mrd-table__filter-no-support" }, t('filter_no_support', this.locale));
-        }
-        if (dataType === 'BOOLEAN') {
-            const boolOp = pf.operator;
-            const noValueOp = boolOp === 'isEmpty' || boolOp === 'isNotEmpty';
-            return (h("div", { class: "mrd-table__filter-radio-group" }, [
-                { labelKey: 'filter_all', value: null },
-                { labelKey: 'yes', value: true },
-                { labelKey: 'no', value: false },
-            ].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 = (_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 = (_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((_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;
-            const noInput = numOp === 'isEmpty' || numOp === 'isNotEmpty';
-            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
-            return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => {
-                    const val = e.target.value;
-                    if (val === 'isEmpty' || val === 'isNotEmpty') {
-                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
-                    }
-                    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: numOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: numOp === '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: `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 dtOp = pf.operator;
-            const noInput = dtOp === 'isEmpty' || dtOp === 'isNotEmpty';
-            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
-            return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => {
-                    const val = e.target.value;
-                    if (val === 'isEmpty' || val === 'isNotEmpty') {
-                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
-                    }
-                    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((_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';
-            const dtdOp = pf.operator;
-            const noInput = dtdOp === 'isEmpty' || dtdOp === 'isNotEmpty';
-            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
-            return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => {
-                    const val = e.target.value;
-                    if (val === 'isEmpty' || val === 'isNotEmpty') {
-                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
-                    }
-                    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((_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;
         if (!this.openFilterCol || !this.pendingFilter)
             return null;
         const col = this.columns.find(c => this.colName(c) === this.openFilterCol);
         if (!col)
             return null;
-        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)))));
+        return (h(FilterPopup, { col: col, dataType: this.colDataType(col), openFilterCol: this.openFilterCol, pendingFilter: this.pendingFilter, popupPos: this.popupPos, sortField: this.sortField, sortDir: this.sortDir, locale: this.locale, cb: {
+                onSetPending: (key, val) => this.setPending(key, val),
+                onReplacePending: pf => (this.pendingFilter = pf),
+                onToggleValue: (key, checked) => this.togglePendingValue(key, checked),
+                onApplySort: dir => this.applySort(col, dir),
+                onApply: () => this.applyFilter(),
+                onClear: () => this.clearFilter(),
+                onClose: () => this.closeFilterPopup(),
+            } }));
     }
     // ── Render: footer ────────────────────────────────────────────────────────
     renderFooter(rowCount, effectiveTotal, isTotalKnown = true) {
@@ -965,54 +769,11 @@ export class MrdTable {
     }
     // ── Render: cell ──────────────────────────────────────────────────────────
     renderCell(col, row) {
-        var _a, _b, _c;
-        const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
-        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 = (_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;
-            return (h("td", { class: "mrd-table__cell" }, href && fileName ? (h("button", { class: "mrd-table__file-btn", title: fileName, onClick: (e) => {
-                    e.stopPropagation();
-                    this.mrdDownload.emit({ href, fileName });
-                } }, h("svg", { class: "mrd-table__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), t('download', this.locale))) : ''));
-        }
-        if (dataType === 'JSON') {
-            const name = (_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" });
-            const compactHtml = CellRenderer.formatJson(rawValue, true);
-            const prettyHtml = CellRenderer.formatJson(rawValue, false);
-            return (h("td", { class: "mrd-table__cell" }, h("span", { class: "mrd-table__json-preview", innerHTML: compactHtml }), h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); this.openJsonModal(prettyHtml); }, "aria-label": t('textblock_show_more', this.locale) }, "\u22EF")));
-        }
-        const TEXTBLOCK_MAX = 200;
-        if (dataType === 'TEXTBLOCK') {
-            const full = CellRenderer.render(col, row, this.locale);
-            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));
+        return (h(TableCell, { col: col, row: row, locale: this.locale, onDownload: detail => this.mrdDownload.emit(detail), onOpenTextblock: full => this.openTextblockModal(full), onOpenJson: html => this.openJsonModal(html) }));
     }
     // ── Render: totals row ────────────────────────────────────────────────────
     renderTotalsRow() {
-        if (!this.aggregations)
-            return null;
-        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;
-            const val = this.renderAggregationValue(col);
-            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));
-        }))));
+        return h(TotalsRow, { columns: this.columns, aggregations: this.aggregations, locale: this.locale });
     }
     // ── Render ─────────────────────────────────────────────────────────────────
     render() {
@@ -1032,7 +793,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" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), 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 && h(FilterIcon, null)));
             }))), 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 ────────────────────────────────────
@@ -1040,12 +801,7 @@ export class MrdTable {
         // if any loaded page is shorter than pageSize it is the last page,
         // so the true total cannot exceed (pageNum * pageSize + pageRows.length).
         // aggregationsTotal (from setAggregations) takes priority over the totalElements prop.
-        let effectiveTotal = this.baseTotal;
-        for (const [pageNum, pageRows] of this.loadedPages) {
-            if (pageRows.length < this.pageSize) {
-                effectiveTotal = Math.min(effectiveTotal, pageNum * this.pageSize + pageRows.length);
-            }
-        }
+        const effectiveTotal = computeEffectiveTotal(this.loadedPages, this.pageSize, this.baseTotal);
         // Clamp renderEnd to what we actually know exists (-1 when empty)
         const clampedEnd = Math.min(this.renderEnd, effectiveTotal - 1);
         const colCount = this.columns.length;
@@ -1058,7 +814,13 @@ export class MrdTable {
         for (let i = this.renderStart; i <= clampedEnd; i++) {
             const row = this.getRow(i);
             if (row === null) {
-                renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--loading" }, h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, h("span", { class: "mrd-table__placeholder-bar" }))));
+                const page = Math.floor(i / this.pageSize);
+                if (this.failedPages.has(page)) {
+                    renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--failed" }, h("td", { class: "mrd-table__cell--failed", colSpan: colCount }, h("button", { type: "button", class: "mrd-table__retry-button", onClick: () => this.retryPage(page) }, t('load_failed_retry', this.locale)))));
+                }
+                else {
+                    renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--loading" }, h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, h("span", { class: "mrd-table__placeholder-bar" }))));
+                }
             }
             else {
                 renderedRows.push(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))));
@@ -1076,21 +838,14 @@ 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" }, (_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.isTotalKnown()), 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" }))));
+            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 && h(FilterIcon, null)));
+        }))), 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.isTotalKnown()), this.renderFilterPopup(), this.renderTextblockModal(), this.renderJsonModal()));
     }
     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))));
+        return h(TextblockModal, { text: this.textblockModal, locale: this.locale, onClose: () => this.closeTextblockModal() });
     }
     renderJsonModal() {
-        if (this.jsonModal === null)
-            return null;
-        return (h("div", { class: "mrd-table__modal-backdrop", onClick: () => this.closeJsonModal(), role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: () => this.closeJsonModal(), "aria-label": t('close', this.locale) }, "\u2715"), h("pre", { class: "mrd-table__modal-json", innerHTML: this.jsonModal }))));
+        return h(JsonModal, { html: this.jsonModal, locale: this.locale, onClose: () => this.closeJsonModal() });
     }
     static get is() { return "mrd-table"; }
     static get encapsulation() { return "scoped"; }
@@ -1115,7 +870,7 @@ export class MrdTable {
                     "references": {
                         "ClientLayoutItem": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientLayoutItem",
                             "referenceLocation": "ClientLayoutItem"
                         }
@@ -1273,6 +1028,26 @@ export class MrdTable {
                 "reflect": false,
                 "attribute": "table-height",
                 "defaultValue": "500"
+            },
+            "requestTimeoutMs": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Time (ms) to wait for setPage() before retrying a page request; after\nMAX_RETRY_ATTEMPTS retries the page is marked failed (see failedPages)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "request-timeout-ms",
+                "defaultValue": "REQUEST_TIMEOUT_MS"
             }
         };
     }
@@ -1281,6 +1056,7 @@ export class MrdTable {
             "activeViewIdx": {},
             "loadedPages": {},
             "requestedPages": {},
+            "failedPages": {},
             "renderStart": {},
             "renderEnd": {},
             "colWidths": {},
@@ -1317,6 +1093,21 @@ export class MrdTable {
                     "resolved": "{ page: number; sort: string; path: string; qs: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdPageError",
+                "name": "mrdPageError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a page request timed out MAX_RETRY_ATTEMPTS times without setPage() being called.\nPurely informational \u2014 the table shows its own retry row regardless of whether a host listens."
+                },
+                "complexType": {
+                    "original": "{ page: number }",
+                    "resolved": "{ page: number; }",
+                    "references": {}
+                }
             }, {
                 "method": "mrdRowClick",
                 "name": "mrdRowClick",
@@ -1455,7 +1246,7 @@ export class MrdTable {
                         },
                         "AggregationResult": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::AggregationResult",
                             "referenceLocation": "AggregationResult"
                         }