@mmlogic/components 0.1.0

package/dist/cjs/mrd-table.cjs.entry.js

@@ -0,0 +1,322 @@
+'use strict';
+
+var index = require('./index-OvnIRO4Y.js');
+var format = require('./format-CDw-zie_.js');
+
+class CellRenderer {
+    static render(column, row, locale) {
+        var _a, _b;
+        if (column.type === 'RELATION') {
+            const link = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a[column.name];
+            if (!link)
+                return '';
+            if (Array.isArray(link))
+                return link.map((l) => { var _a; return (_a = l.name) !== null && _a !== void 0 ? _a : ''; }).filter(Boolean).join(', ');
+            return (_b = link.name) !== null && _b !== void 0 ? _b : '';
+        }
+        const raw = row === null || row === void 0 ? void 0 : row[column.name];
+        if (raw == null || raw === '')
+            return '';
+        const values = Array.isArray(raw) ? raw : [raw];
+        return values
+            .map(v => { var _a; return CellRenderer.renderValue((_a = column.dataType) !== null && _a !== void 0 ? _a : 'TEXT', v, column, locale); })
+            .filter(s => s !== '')
+            .join(', ');
+    }
+    static renderValue(dataType, value, column, locale) {
+        var _a, _b;
+        switch (dataType) {
+            case 'INTEGER':
+                return format.formatNumber(Number(value), locale, { maximumFractionDigits: 0 });
+            case 'DECIMAL':
+                return format.formatNumber(Number(value), locale);
+            case 'PERCENTAGE':
+                return format.formatPercentage(Number(value), locale);
+            case 'CURRENCY': {
+                const { amount, currency } = typeof value === 'object' && value !== null
+                    ? value
+                    : { amount: value, currency: '' };
+                return currency
+                    ? format.formatCurrency(Number(amount), currency, locale)
+                    : format.formatNumber(Number(amount), locale);
+            }
+            case 'DATE':
+                return format.formatDate(value, locale);
+            case 'DATETIME':
+                return format.formatDateTime(value, locale);
+            case 'TIME':
+                return format.formatTime(value, locale);
+            case 'BOOLEAN':
+                return value ? '✓' : '';
+            case 'LIST': {
+                const item = (_a = column.listItems) === null || _a === void 0 ? void 0 : _a.find(li => li.key === String(value));
+                return (_b = item === null || item === void 0 ? void 0 : item.label) !== null && _b !== void 0 ? _b : String(value);
+            }
+            case 'TEXTBLOCK':
+                return String(value).replace(/<[^>]*>/g, '').trim();
+            default:
+                return String(value);
+        }
+    }
+}
+
+const mrdTableScss = () => `.sc-mrd-table-h{display:block;width:100%}.mrd-table__scroll.sc-mrd-table{overflow-y:auto;overflow-x:auto;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow-anchor:none}.mrd-table.sc-mrd-table{overflow-x:auto}.mrd-table__table.sc-mrd-table{width:auto;min-width:100%;border-collapse:collapse;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-table__scroll.sc-mrd-table .mrd-table__table.sc-mrd-table{min-width:max-content}.mrd-table__header.sc-mrd-table{position:sticky;top:0;z-index:1;background:var(--mrd-color-white);text-align:left;padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:2px solid var(--mrd-border-color);color:var(--mrd-color-neutral-600);font-weight:var(--mrd-font-weight-medium);white-space:nowrap;font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em}.mrd-table__header--sortable.sc-mrd-table{cursor:pointer;user-select:none}.mrd-table__header--sortable.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-800)}.mrd-table__header--sorted-asc.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-label.sc-mrd-table{margin-right:var(--mrd-space-1)}.mrd-table__sort-icon.sc-mrd-table{font-size:0.65rem;opacity:0.4;vertical-align:middle}.mrd-table__header--sorted-asc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table{opacity:1;color:var(--mrd-color-primary)}.mrd-table__row.sc-mrd-table{border-bottom:1px solid var(--mrd-border-color)}.mrd-table__row.sc-mrd-table:hover{background:var(--mrd-color-neutral-200) !important}.mrd-table__spacer.sc-mrd-table{border:none}.mrd-table__spacer.sc-mrd-table td.sc-mrd-table{padding:0;border:none}.mrd-table__cell.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);vertical-align:top;white-space:nowrap}.mrd-table__cell--numeric.sc-mrd-table{text-align:right;font-variant-numeric:tabular-nums}.mrd-table__row--loading.sc-mrd-table{background:transparent}.mrd-table__cell--placeholder.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__placeholder-bar.sc-mrd-table{display:block;height:0.75rem;width:55%;border-radius:var(--mrd-border-radius-sm);background:linear-gradient(     90deg,     var(--mrd-color-neutral-200) 25%,     var(--mrd-color-neutral-100) 50%,     var(--mrd-color-neutral-200) 75%   );background-size:200% 100%;animation:mrd-shimmer 1.4s ease infinite}@keyframes mrd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mrd-table__empty.sc-mrd-table{padding:var(--mrd-space-4) var(--mrd-space-3);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center;margin:0}`;
+
+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;
+const MrdTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdLoadPage = index.createEvent(this, "mrdLoadPage");
+        // ── Debounce internals (geen @State — triggert geen re-render) ─────────────
+        /** Pagina's die wachten op debounce-flush. */
+        this.pendingPages = new Set();
+        /** Handle van de actieve debounce-timer. */
+        this.debounceTimer = null;
+        // ── Props ──────────────────────────────────────────────────────────────────
+        this.columns = [];
+        /** Direct rows (non-paginated mode, used when totalElements === 0). */
+        this.rows = [];
+        this.locale = navigator.language;
+        /** Total number of records across all pages. 0 = non-paginated mode. */
+        this.totalElements = 0;
+        /** Records per page (must match the API page size). */
+        this.pageSize = 20;
+        /** Row height in px — used for spacer and scroll-position maths. */
+        this.rowHeight = 36;
+        /** Height of the scroll container in px. */
+        this.tableHeight = 500;
+        /** Initial sort applied on load, e.g. "timestamp,desc" or "name".
+         *  Parsed by init() into sortField + sortDir. */
+        this.defaultSort = '';
+        // ── Internal state ─────────────────────────────────────────────────────────
+        /** Pages injected via setPage(). Always replaced by a new Map to trigger re-render. */
+        this.loadedPages = new Map();
+        /** Pages already requested via mrdLoadPage (to avoid duplicate events). */
+        this.requestedPages = new Set();
+        /** Absolute index of the first row currently in the render window. */
+        this.renderStart = 0;
+        /** Absolute index of the last row currently in the render window. */
+        this.renderEnd = 0;
+        /** Locked column widths (px) — measured after first page renders, then fixed. */
+        this.colWidths = [];
+        /** Column currently used for sorting (empty = no sort). */
+        this.sortField = '';
+        /** Sort direction for sortField. */
+        this.sortDir = 'asc';
+        this.handleScroll = (e) => {
+            const scroller = e.currentTarget;
+            const scrollTop = scroller.scrollTop;
+            const total = this.totalElements;
+            const visStart = Math.floor(scrollTop / this.rowHeight);
+            const visEnd = Math.min(visStart + this.visibleCount(), total - 1);
+            this.renderStart = Math.max(0, visStart - BUFFER);
+            this.renderEnd = Math.min(total - 1, visEnd + BUFFER);
+            this.requestPagesForWindow(this.renderStart, this.renderEnd);
+        };
+    }
+    // ── Public API ─────────────────────────────────────────────────────────────
+    /**
+     * Initialise (or reset) the virtual scroll.
+     * Call after setting all props and registering the mrdLoadPage listener,
+     * but before calling setPage(0, rows).
+     */
+    async init() {
+        var _a;
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        this.pendingPages.clear();
+        this.loadedPages = new Map();
+        this.requestedPages = new Set();
+        this.colWidths = [];
+        // Apply defaultSort prop as the initial sort state.
+        if (this.defaultSort) {
+            const parts = this.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';
+        }
+        this.renderStart = 0;
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() + BUFFER, this.totalElements - 1));
+        // Scroll the container back to the top when switching datasets.
+        const scroller = this.el.querySelector('.mrd-table__scroll');
+        if (scroller)
+            scroller.scrollTop = 0;
+        // Do NOT emit mrdLoadPage here — the host injects page 0 via setPage().
+    }
+    /**
+     * Inject the rows for a given page (0-based).
+     * Creates a new Map reference so Stencil detects the state change.
+     */
+    async setPage(pageNumber, rows) {
+        const next = new Map(this.loadedPages);
+        next.set(pageNumber, rows);
+        this.loadedPages = next;
+    }
+    // ── Private helpers ────────────────────────────────────────────────────────
+    visibleCount() {
+        return Math.ceil(this.tableHeight / this.rowHeight);
+    }
+    /** Returns the current sort value for use in ?sort= query params. */
+    sortParam() {
+        if (!this.sortField)
+            return '';
+        return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
+    }
+    /** Called when a header cell is clicked. Toggles direction or sets a new column. */
+    handleSortClick(col) {
+        if (this.sortField === col.name) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortField = col.name;
+            this.sortDir = 'asc';
+        }
+        // Cancel any pending scroll debounce.
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        this.pendingPages.clear();
+        // Wipe all loaded data so the new sort order is fetched fresh.
+        this.loadedPages = new Map();
+        this.requestedPages = new Set();
+        this.colWidths = [];
+        this.renderStart = 0;
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() + BUFFER, this.totalElements - 1));
+        const scroller = this.el.querySelector('.mrd-table__scroll');
+        if (scroller)
+            scroller.scrollTop = 0;
+        // Emit immediately — no debounce for intentional sort clicks.
+        this.emitPagesForWindow(this.renderStart, this.renderEnd);
+    }
+    /** Emits mrdLoadPage immediately for all missing pages in [start, end]. */
+    emitPagesForWindow(start, end) {
+        const firstPage = Math.floor(start / this.pageSize);
+        const lastPage = Math.floor(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() });
+                changed = true;
+            }
+        }
+        if (changed)
+            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;
+    }
+    requestPagesForWindow(start, end) {
+        const firstPage = Math.floor(start / this.pageSize);
+        const lastPage = Math.floor(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)) {
+                this.pendingPages.add(p);
+                anyNew = true;
+            }
+        }
+        if (!anyNew)
+            return;
+        // Reset de timer: wacht tot het scrollen even stopt.
+        if (this.debounceTimer !== null)
+            clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => this.flushPendingPages(), REQUEST_DEBOUNCE_MS);
+    }
+    /** Emitteert mrdLoadPage alleen voor pagina's die na de debounce-wachttijd
+     *  nog steeds binnen het huidige render-venster vallen. */
+    flushPendingPages() {
+        this.debounceTimer = null;
+        if (this.pendingPages.size === 0)
+            return;
+        const next = new Set(this.requestedPages);
+        let changed = false;
+        for (const page of this.pendingPages) {
+            // Sla over als pagina inmiddels geladen of al aangevraagd is.
+            if (this.loadedPages.has(page) || next.has(page))
+                continue;
+            // Sla over als de pagina buiten het huidige venster is geraakt.
+            const pageStart = page * this.pageSize;
+            const pageEnd = pageStart + this.pageSize - 1;
+            if (pageEnd < this.renderStart || pageStart > this.renderEnd)
+                continue;
+            next.add(page);
+            this.mrdLoadPage.emit({ page, sort: this.sortParam() });
+            changed = true;
+        }
+        this.pendingPages.clear();
+        if (changed)
+            this.requestedPages = next;
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    /** After the first page of data renders, lock column widths so subsequent
+     *  page loads don't cause layout shifts. */
+    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);
+            }
+        }
+    }
+    // ── Render ─────────────────────────────────────────────────────────────────
+    render() {
+        var _a, _b;
+        if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
+        // ── Non-paginated mode ──────────────────────────────────────────────────
+        if (this.totalElements === 0) {
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-table" }, index.h("table", { class: "mrd-table__table" }, index.h("thead", null, index.h("tr", null, this.columns.map(col => (index.h("th", { class: "mrd-table__header" }, col.label))))), index.h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (index.h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
+                var _a;
+                const value = CellRenderer.render(col, row, this.locale);
+                const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
+                return (index.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+            })))))), (!this.rows || this.rows.length === 0) && (index.h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden.")))));
+        }
+        // ── Paginated / virtual-scroll mode ────────────────────────────────────
+        const total = this.totalElements;
+        const colCount = this.columns.length;
+        const topSpacerHeight = this.renderStart * this.rowHeight;
+        const bottomSpacerHeight = Math.max(0, (total - 1 - this.renderEnd) * this.rowHeight);
+        const renderedRows = [];
+        for (let i = this.renderStart; i <= this.renderEnd; i++) {
+            const row = this.getRow(i);
+            if (row === null) {
+                renderedRows.push(index.h("tr", { class: "mrd-table__row mrd-table__row--loading" }, index.h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, index.h("span", { class: "mrd-table__placeholder-bar" }))));
+            }
+            else {
+                renderedRows.push(index.h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
+                    var _a;
+                    const value = CellRenderer.render(col, row, this.locale);
+                    const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
+                    return (index.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+                })));
+            }
+        }
+        const tableStyle = this.colWidths.length > 0
+            ? { tableLayout: 'fixed' }
+            : undefined;
+        return (index.h(index.Host, null, index.h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, index.h("table", { class: "mrd-table__table", style: tableStyle }, index.h("thead", null, index.h("tr", null, this.columns.map((col, idx) => {
+            const isActive = this.sortField === col.name;
+            const cls = `mrd-table__header mrd-table__header--sortable${isActive ? ` mrd-table__header--sorted-${this.sortDir}` : ''}`;
+            return (index.h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, index.h("span", { class: "mrd-table__header-label" }, col.label), index.h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
+        }))), index.h("tbody", null, topSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, index.h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, index.h("td", { colSpan: colCount })))))), total === 0 && (index.h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden."))));
+    }
+    get el() { return index.getElement(this); }
+};
+MrdTable.style = mrdTableScss();
+
+exports.mrd_table = MrdTable;