@mmlogic/components 0.3.10 → 0.4.0

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

@@ -0,0 +1,85 @@
+import { h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { TEXT_TYPES, NUMERIC_TYPES, DATE_TYPES, NO_FILTER_TYPES } from "./table-query";
+export const FilterEditor = ({ col, dataType, openFilterCol, pendingFilter, locale, cb }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const pf = pendingFilter;
+    if (NO_FILTER_TYPES.has(dataType)) {
+        return h("p", { class: "mrd-table__filter-no-support" }, t('filter_no_support', 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-${openFilterCol}`, checked: !noValueOp && pf.value === opt.value, onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: undefined, value: opt.value })) }), t(opt.labelKey, locale)))), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${openFilterCol}`, checked: boolOp === 'isEmpty', onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: 'isEmpty', value: undefined })) }), t('filter_is_empty', locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${openFilterCol}`, checked: boolOp === 'isNotEmpty', onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: 'isNotEmpty', value: undefined })) }), t('filter_is_not_empty', locale))));
+    }
+    if (dataType === 'LIST') {
+        const items = (_a = col.listItems) !== null && _a !== void 0 ? _a : [];
+        const selected = (_b = pf.values) !== null && _b !== void 0 ? _b : [];
+        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: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { values: items.map(i => i.key) })) }, t('filter_select_all', locale)), h("button", { class: "mrd-table__filter-list-btn", onClick: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { values: [] })) }, t('filter_select_none', locale))), items.map(item => (h("label", { class: "mrd-table__filter-checkbox-label" }, h("input", { type: "checkbox", checked: selected.includes(item.key), onChange: (e) => cb.onToggleValue(item.key, e.target.checked) }), item.label)))));
+    }
+    if (TEXT_TYPES.has(dataType) || dataType === 'RELATION') {
+        const op = (_c = pf.operator) !== null && _c !== void 0 ? _c : 'startsWith';
+        const noInput = op === 'isEmpty' || op === 'isNotEmpty';
+        return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => cb.onSetPending('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, locale)))), !noInput && (h("input", { type: "text", class: "mrd-table__filter-input", value: String((_d = pf.value) !== null && _d !== void 0 ? _d : ''), placeholder: t('filter_search_value', locale), onInput: (e) => cb.onSetPending('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') {
+                    cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined }));
+                }
+                else {
+                    cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: undefined }));
+                }
+            } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', locale)), h("option", { value: "isEmpty", selected: numOp === 'isEmpty' }, t('filter_is_empty', locale)), h("option", { value: "isNotEmpty", selected: numOp === 'isNotEmpty' }, t('filter_is_not_empty', 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-${openFilterCol}`, checked: !rangeMode, onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { from: undefined, to: undefined })) }), t('filter_exact', locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `nm-${openFilterCol}`, checked: rangeMode, onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null })) }), t('filter_range', locale))), !rangeMode ? (h("input", { type: "number", class: "mrd-table__filter-input", value: pf.value != null ? String(pf.value) : '', onInput: (e) => cb.onSetPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_from', locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => cb.onSetPending('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', locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => cb.onSetPending('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') {
+                    cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined }));
+                }
+                else {
+                    cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: undefined }));
+                }
+            } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', locale)), h("option", { value: "isEmpty", selected: dtOp === 'isEmpty' }, t('filter_is_empty', locale)), h("option", { value: "isNotEmpty", selected: dtOp === 'isNotEmpty' }, t('filter_is_not_empty', 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-${openFilterCol}`, checked: !rangeMode, onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { from: undefined, to: undefined })) }), t('filter_exact', locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${openFilterCol}`, checked: rangeMode, onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null })) }), t('filter_range', locale))), !rangeMode ? (h("input", { type: "date", class: "mrd-table__filter-input", value: String((_e = pf.value) !== null && _e !== void 0 ? _e : ''), onInput: (e) => cb.onSetPending('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', locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.from != null ? String(pf.from) : '', onInput: (e) => cb.onSetPending('from', e.target.value) }), h("label", { class: "mrd-table__filter-range-label" }, t('filter_to', locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.to != null ? String(pf.to) : '', onInput: (e) => cb.onSetPending('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') {
+                    cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined }));
+                }
+                else {
+                    cb.onReplacePending(Object.assign(Object.assign({}, pf), { operator: undefined }));
+                }
+            } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', locale)), h("option", { value: "isEmpty", selected: dtdOp === 'isEmpty' }, t('filter_is_empty', locale)), h("option", { value: "isNotEmpty", selected: dtdOp === 'isNotEmpty' }, t('filter_is_not_empty', 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-${openFilterCol}`, checked: !rangeMode, onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { from: undefined, to: undefined })) }), t('filter_exact', locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${openFilterCol}`, checked: rangeMode, onChange: () => cb.onReplacePending(Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null })) }), t('filter_range', locale))), !rangeMode ? (h("input", { type: inputType, class: "mrd-table__filter-input", value: String((_f = pf.value) !== null && _f !== void 0 ? _f : ''), onInput: (e) => cb.onSetPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_from', locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => cb.onSetPending('from', e.target.value) }), h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_to', locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => cb.onSetPending('to', e.target.value) })))))));
+    }
+    return null;
+};
+export const FilterPopup = (props) => {
+    var _a;
+    const { col, openFilterCol, popupPos, sortField, sortDir, locale, cb } = props;
+    const label = (_a = col.label) !== null && _a !== void 0 ? _a : openFilterCol;
+    const sortActive = sortField === openFilterCol;
+    return (h("div", { class: "mrd-table__filter-popup", style: { top: `${popupPos.top}px`, left: `${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: cb.onClose }, "\u2715")), h("div", { class: "mrd-table__filter-section" }, h("div", { class: "mrd-table__filter-section-label" }, t('filter_sorting', locale)), h("div", { class: "mrd-table__filter-sort-buttons" }, h("button", { class: `mrd-table__filter-sort-btn${sortActive && sortDir === 'asc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => cb.onApplySort('asc') }, "\u25B2 ", t('filter_ascending', locale)), h("button", { class: `mrd-table__filter-sort-btn${sortActive && sortDir === 'desc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => cb.onApplySort('desc') }, "\u25BC ", t('filter_descending', 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', locale)), h(FilterEditor, Object.assign({}, props))), h("div", { class: "mrd-table__filter-popup-footer" }, h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--clear", onClick: cb.onClear }, t('filter_clear', locale)), h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--apply", onClick: cb.onApply }, t('filter_apply', locale)))));
+};

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

@@ -0,0 +1,110 @@
+import { h } from "@stencil/core";
+import { CellRenderer } from "../../../utils/cell-renderer";
+import { t } from "../../../utils/i18n";
+import { formatNumber, formatPercentage, formatCurrency } from "../../../utils/format";
+import { NUMERIC_TYPES } from "./table-query";
+/**
+ * Stateless render parts of mrd-table. All state and handlers stay in the
+ * component; these components receive plain values and callbacks.
+ */
+export const FilterIcon = () => (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" }))));
+const TEXTBLOCK_MAX = 200;
+export const TableCell = ({ col, row, locale, onDownload, onOpenTextblock, onOpenJson }) => {
+    var _a, _b, _c;
+    const dataType = (_a = col.dataType) !== null && _a !== void 0 ? _a : '';
+    const isNumeric = col.type === 'FIELD' && NUMERIC_TYPES.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();
+                onDownload({ 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', 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(); onOpenJson(prettyHtml); }, "aria-label": t('textblock_show_more', locale) }, "\u22EF")));
+    }
+    if (dataType === 'TEXTBLOCK') {
+        const full = CellRenderer.render(col, row, 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(); onOpenTextblock(full); }, "aria-label": t('textblock_show_more', locale) }, "\u22EF")));
+    }
+    const value = CellRenderer.render(col, row, locale);
+    return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+};
+/** Formats the aggregation total for one column, '' when not applicable. */
+export function formatAggregationValue(col, aggregations, locale) {
+    var _a;
+    if (col.type !== 'FIELD' || !col.aggregate || !aggregations)
+        return '';
+    const fn = col.aggregate.toLowerCase();
+    const aggData = 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, locale, { maximumFractionDigits: 0 });
+    if (dt === 'PERCENTAGE')
+        return formatPercentage(val, locale);
+    if (dt === 'CURRENCY' && col.currencyCode)
+        return formatCurrency(val, col.currencyCode, locale);
+    return formatNumber(val, locale);
+}
+export const TotalsRow = ({ columns, aggregations, locale }) => {
+    if (!aggregations)
+        return null;
+    if (!columns.some(c => c.type === 'FIELD' && c.aggregate))
+        return null;
+    return (h("tfoot", null, h("tr", { class: "mrd-table__totals-row" }, columns.map(col => {
+        var _a;
+        const val = formatAggregationValue(col, aggregations, locale);
+        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));
+    }))));
+};
+export const TextblockModal = ({ text, locale, onClose }) => {
+    if (text === null)
+        return null;
+    return (h("div", { class: "mrd-table__modal-backdrop", onClick: onClose, role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: onClose, "aria-label": t('close', locale) }, "\u2715"), h("p", { class: "mrd-table__modal-text" }, text))));
+};
+export const JsonModal = ({ html, locale, onClose }) => {
+    if (html === null)
+        return null;
+    return (h("div", { class: "mrd-table__modal-backdrop", onClick: onClose, role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: onClose, "aria-label": t('close', locale) }, "\u2715"), h("pre", { class: "mrd-table__modal-json", innerHTML: html }))));
+};
+export const Toolbar = ({ locale, filterMode, filterCount, actions, views, activeViewIdx, viewPopoverOpen, createPickerOpen, createTypes, cb }) => {
+    var _a;
+    const hasActions = actions.length > 0;
+    const hasViewSwitcher = views.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${filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: cb.onFilterToggle }, 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" }, filterMode ? t('table_filter_hide', locale) : t('table_filter', locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', locale)})` : '')), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: cb.onClearAllFilters }, 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', 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: () => cb.onViewSwitch((activeViewIdx - 1 + views.length) % views.length) }, "\u25C0"), h("div", { class: "mrd-table__view-title-wrap" }, h("button", { class: "mrd-table__view-title", onClick: (e) => cb.onToggleViewPopover(e) }, (_a = views[activeViewIdx]) === null || _a === void 0 ? void 0 : _a.label), viewPopoverOpen && (h("div", { class: "mrd-table__view-popover", onClick: (e) => e.stopPropagation() }, views.map((v, i) => (h("button", { key: String(i), class: `mrd-table__view-popover-item${i === activeViewIdx ? ' mrd-table__view-popover-item--active' : ''}`, onClick: () => {
+            if (i !== activeViewIdx)
+                cb.onViewSwitch(i);
+            cb.onCloseViewPopover();
+        } }, v.label)))))), h("button", { class: "mrd-table__view-arrow", "aria-label": "Next view", onClick: () => cb.onViewSwitch((activeViewIdx + 1) % views.length) }, "\u25B6")))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, actions.map(a => {
+        var _a, _b;
+        const pickerTypes = a.action === 'create' ? createTypes : null;
+        if (pickerTypes === null || pickerTypes === void 0 ? void 0 : pickerTypes.length) {
+            return (h("div", { class: "mrd-table__create-picker-wrap", key: `action-${a.action}` }, h("button", { class: `mrd-table__action mrd-table__action--${(_a = a.variant) !== null && _a !== void 0 ? _a : 'secondary'}`, onClick: cb.onToggleCreatePicker }, 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)), createPickerOpen && (h("div", { class: "mrd-table__create-picker" }, pickerTypes.map(ct => (h("button", { key: ct.type, class: "mrd-table__create-picker-item", onClick: () => cb.onCreate(ct.type) }, ct.label)))))));
+        }
+        return (h("button", { key: `action-${a.action}`, class: `mrd-table__action mrd-table__action--${(_b = a.variant) !== null && _b !== void 0 ? _b : 'secondary'}`, disabled: a.disabled, onClick: () => cb.onAction(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)));
+    })))));
+};

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

@@ -0,0 +1,178 @@
+import { applyViewFilters } from "../../../utils/query-params";
+/**
+ * Pure sort/filter/aggregation query logic for mrd-table.
+ * No component state — everything is passed in.
+ */
+export const TEXT_TYPES = new Set(['TEXT', 'TEXTBLOCK', 'EMAIL', 'HYPERLINK']);
+export const NUMERIC_TYPES = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
+export const DATE_TYPES = new Set(['DATE', 'DATETIME', 'TIME']);
+export const NO_FILTER_TYPES = new Set(['FILE', 'IMAGE']);
+/** Column types that cannot be sorted or filtered (not stored in PostgreSQL). */
+export const NON_INTERACTIVE_TYPES = new Set(['LONGTEXT', 'JSON', 'FILE', 'IMAGE']);
+export function parseDefaultSort(defaultSort) {
+    var _a;
+    if (!defaultSort)
+        return { field: '', dir: 'asc' };
+    const parts = defaultSort.split(',');
+    return { field: parts[0].trim(), dir: ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.trim()) === 'desc' ? 'desc' : 'asc' };
+}
+/** Raw sort query-param value, e.g. "name" or "name,desc". */
+export function buildSortParam(field, dir) {
+    if (!field)
+        return '';
+    return dir === 'desc' ? `${field},desc` : field;
+}
+/** Query params for a page request: page + sort + filterClass + view filters + active column filters. */
+export function buildTableQueryParams(opts) {
+    var _a, _b;
+    const p = new URLSearchParams();
+    if (opts.page > 0)
+        p.set('page', String(opts.page));
+    if (opts.sort)
+        p.set('sort', opts.sort);
+    if (opts.filterClass)
+        p.set('type', opts.filterClass);
+    applyViewFilters(p, opts.viewFilters);
+    for (const f of opts.activeFilters) {
+        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((_a = f.value) !== null && _a !== void 0 ? _a : ''));
+            continue;
+        }
+        if ((_b = f.values) === null || _b === void 0 ? void 0 : _b.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();
+}
+/** Groups aggregate columns by function; null when the view has no aggregates. */
+export function buildAggregationParams(columns) {
+    var _a;
+    const groups = { sum: [], avg: [], count: [] };
+    for (const col of 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;
+}
+/** Aggregation query string: the page-0 query params without page/sort, plus sum/avg/count. */
+export function buildAggregationQs(basePageQs, columns) {
+    var _a, _b, _c;
+    const p = new URLSearchParams(basePageQs);
+    p.delete('page');
+    p.delete('sort');
+    const groups = buildAggregationParams(columns);
+    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();
+}
+/** True when the pending filter actually constrains anything. */
+export function 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;
+}
+// ── DATETIME filters: the user edits local "YYYY-MM-DD" dates, the API stores UTC ISO ──
+/** UTC ISO string at the start (midnight) of the given local day. */
+export function 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). */
+export function 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');
+}
+/** Stored UTC ISO string back to the local "YYYY-MM-DD" date. */
+export function 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" is the exclusive end (next midnight); subtract a day to recover the entered date. */
+export function 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')}`;
+}
+/** Applies the local→UTC conversion when a DATETIME filter is submitted.
+ *  Exact date → range covering the full local day. */
+export function normalizeDatetimeFilter(f) {
+    const normalized = Object.assign({}, f);
+    if (f.dataType === 'DATETIME' && f.operator !== 'isEmpty' && f.operator !== 'isNotEmpty') {
+        if (typeof normalized.value === 'string' && normalized.value) {
+            normalized.from = dateLocalToUTCStart(normalized.value);
+            normalized.to = dateLocalToUTCEndExclusive(normalized.value);
+            normalized.value = undefined;
+        }
+        else {
+            if (typeof normalized.from === 'string' && normalized.from)
+                normalized.from = dateLocalToUTCStart(normalized.from);
+            if (typeof normalized.to === 'string' && normalized.to)
+                normalized.to = dateLocalToUTCEndExclusive(normalized.to);
+        }
+    }
+    return normalized;
+}
+/** Converts a stored DATETIME filter back to local dates for the popup.
+ *  A range covering a single local day is restored to exact-date mode. */
+export function datetimeFilterToDisplay(existing) {
+    const display = Object.assign({}, existing);
+    if (typeof display.from === 'string' && display.from)
+        display.from = utcISOToLocalDate(display.from);
+    if (typeof display.to === 'string' && display.to)
+        display.to = utcISOToLocalDateExclusiveEnd(display.to);
+    if (display.from && display.to && display.from === display.to) {
+        return Object.assign(Object.assign({}, display), { value: display.from, from: undefined, to: undefined });
+    }
+    return display;
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Pure window/paging maths for the mrd-table virtual scroll.
+ * The window state itself stays @State in the component; these
+ * functions only compute values from it.
+ */
+export const BUFFER = 10;
+/** Wait this long (ms) after the last scroll event before requesting pages,
+ *  so pages the user quickly scrolls past are skipped. */
+export const REQUEST_DEBOUNCE_MS = 150;
+export function visibleCount(tableHeight, rowHeight) {
+    return Math.ceil(tableHeight / rowHeight);
+}
+/** Render window (with buffer) for the given scroll offset. */
+export function computeWindow(scrollTop, rowHeight, tableHeight, total) {
+    const visStart = Math.floor(scrollTop / rowHeight);
+    const visEnd = Math.min(visStart + visibleCount(tableHeight, rowHeight), total - 1);
+    return {
+        renderStart: Math.max(0, visStart - BUFFER),
+        renderEnd: Math.min(total - 1, visEnd + BUFFER),
+    };
+}
+/** First/last page (0-based) covering the given row window. */
+export function pageRange(start, end, pageSize) {
+    return { firstPage: Math.floor(start / pageSize), lastPage: Math.floor(end / pageSize) };
+}
+export function getRowFromPages(pages, index, pageSize) {
+    var _a;
+    const page = pages.get(Math.floor(index / pageSize));
+    return (_a = page === null || page === void 0 ? void 0 : page[index % pageSize]) !== null && _a !== void 0 ? _a : null;
+}
+/** Authoritative row count: a page shorter than pageSize is the last page,
+ *  so the true total cannot exceed its end index. */
+export function computeEffectiveTotal(loadedPages, pageSize, baseTotal) {
+    let effectiveTotal = baseTotal;
+    for (const [pageNum, pageRows] of loadedPages) {
+        if (pageRows.length < pageSize) {
+            effectiveTotal = Math.min(effectiveTotal, pageNum * pageSize + pageRows.length);
+        }
+    }
+    return effectiveTotal;
+}
+/** True when some loaded page was short — the exact total is then known. */
+export function isTotalKnownFromPages(loadedPages, pageSize) {
+    for (const rows of loadedPages.values()) {
+        if (rows.length < pageSize)
+            return true;
+    }
+    return false;
+}

package/dist/collection/dev/app.js

@@ -119,27 +119,33 @@ function showTab(name) {
 
 let _detailViewInitialized = false;
 
-function initDetailViewTab() {
+async function initDetailViewTab() {
   if (_detailViewInitialized) return;
   _detailViewInitialized = true;
 
   const table = document.getElementById('companies-table');
-  const meta  = window.EXAMPLE_COMPANY_METADATA;
+  if (typeof table.componentOnReady === 'function') {
+    await table.componentOnReady();
+  } else {
+    await customElements.whenDefined('mrd-table');
+  }
 
-  table.columns      = window.EXAMPLE_COMPANY_COLUMNS;
+  table.item          = window.EXAMPLE_COMPANY_VIEW_ITEM;
   table.totalElements = window.EXAMPLE_COMPANIES.length;
-  table.pageSize     = 20;
-  table.locale       = 'nl-NL';
+  table.pageSize      = 20;
+  table.locale        = 'nl-NL';
 
+  // Register before init(): init() emits mrdLoadPage for page 0 itself.
   table.addEventListener('mrdLoadPage', async (e) => {
-    await table.setPage(e.detail.page, window.EXAMPLE_COMPANIES);
+    logEvent('mrdLoadPage', e.detail);
+    await table.setPage(e.detail.page, window.EXAMPLE_COMPANIES, false);
   });
 
   table.addEventListener('mrdRowClick', (e) => {
     showCompanyDetail(e.detail);
   });
 
-  table.init().then(() => table.setPage(0, window.EXAMPLE_COMPANIES));
+  await table.init();
 }
 
 function showCompanyDetail(row) {
@@ -166,24 +172,19 @@ function showCompanyDetail(row) {
     const section = document.createElement('mrd-layout-section');
     section.items = layout.items;
     section.data  = company;
-    section.views = meta.views;
     section.locale = 'nl-NL';
 
     section.addEventListener('mrdNavigate', (e) => {
       logEvent('mrdNavigate', e.detail);
     });
 
-    section.addEventListener('mrdLoadView', async (e) => {
-      const { name, viewConfig } = e.detail;
-      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
-      await section.setViewPage(name, 0, mockRows, mockRows.length);
-    });
-
     section.addEventListener('mrdLoadViewPage', async (e) => {
-      // No more pages in the mock — just set the same rows again
-      const { name } = e.detail;
-      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
-      await section.setViewPage(name, e.detail.page, mockRows);
+      // Single mock page: answer every page request with the same rows + total.
+      // `name` is the view key: relatedClass for a RELATED_VIEW item.
+      const { name, page } = e.detail;
+      logEvent('mrdLoadViewPage', e.detail);
+      const mockRows = name === 'appointments' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
+      await section.setViewPage(name, page, mockRows, mockRows.length);
     });
 
     wrapper.appendChild(section);

package/dist/collection/dev/example-data.js

@@ -105,6 +105,23 @@ window.EXAMPLE_COMPANY_COLUMNS = [
   { type: 'FIELD', label: 'Employees', name: 'totalEmployees', dataType: 'INTEGER', required: false },
 ];
 
+/** VIEW layout item for the companies list table (mrd-table `item` prop). */
+window.EXAMPLE_COMPANY_VIEW_ITEM = {
+  type: 'VIEW',
+  label: 'Companies',
+  name: 'companiesView',
+  dataClass: 'companies',
+  view: {
+    name: null,
+    defaultView: true,
+    defaultSort: 'name',
+    values: window.EXAMPLE_COMPANY_COLUMNS,
+    type: 'companies',
+    singularLabel: 'Company',
+    pluralLabel: 'Companies',
+  },
+};
+
 /** Rows for the companies list table. */
 window.EXAMPLE_COMPANIES = [
   {
@@ -225,7 +242,31 @@ window.EXAMPLE_COMPANY_METADATA = {
       label: 'Appointments',
       tabPage: true,
       items: [
-        { type: 'RELATED_VIEW', label: 'Appointments', name: 'view0', relatedClass: 'appointments', showTitle: false },
+        {
+          type: 'RELATED_VIEW', label: 'Appointments', name: 'view0',
+          relatedClass: 'appointments', fromClass: 'companies', showTitle: false,
+          view: {
+            name: null,
+            defaultView: true,
+            defaultSort: 'name',
+            values: [
+              { type: 'FIELD', label: 'name', name: 'name', dataType: 'TEXT', required: true },
+              { type: 'RELATION', label: 'Officer', name: 'officer', relatedClass: 'housekeeping.officer', mostSignificantClass: 'entities', required: true },
+              {
+                type: 'FIELD', label: 'Authority', name: 'authority', dataType: 'LIST', required: false,
+                listItems: [
+                  { key: 'SOLE', label: 'Sole authority' },
+                  { key: 'JOINT', label: 'Joint authority' },
+                ],
+              },
+              { type: 'FIELD', label: 'start date', name: 'activeDate', dataType: 'DATE', required: false },
+              { type: 'FIELD', label: 'end date', name: 'inactiveDate', dataType: 'DATE', required: false },
+            ],
+            type: 'appointments',
+            singularLabel: 'Appointment',
+            pluralLabel: 'Appointments',
+          },
+        },
       ],
     },
     {
@@ -234,57 +275,31 @@ window.EXAMPLE_COMPANY_METADATA = {
       tabPage: true,
       items: [
         {
-          type: 'RELATED_VIEW', label: 'Share classes', name: 'view1', relatedClass: 'shareClasses', showTitle: false,
+          type: 'RELATED_VIEW', label: 'Share classes', name: 'view1',
+          relatedClass: 'shareClasses', fromClass: 'companies', showTitle: false,
           actions: ['NEW', 'EXPORT'],
           createTypes: [
             { type: 'ordinaryShares', label: 'Ordinary shares' },
             { type: 'preferenceShares', label: 'Preference shares' },
           ],
+          view: {
+            name: null,
+            defaultView: true,
+            defaultSort: 'name',
+            values: [
+              { type: 'FIELD', label: 'name', name: 'name', dataType: 'TEXT', required: true },
+              { type: 'FIELD', label: 'Nominal value', name: 'nominalValue', dataType: 'TEXT', required: false },
+              { type: 'FIELD', label: 'Currency', name: 'currency', dataType: 'TEXT', required: false },
+              { type: 'FIELD', label: 'Authorised shares', name: 'authorizedShares', dataType: 'INTEGER', required: false },
+            ],
+            type: 'shareClasses',
+            singularLabel: 'Share class',
+            pluralLabel: 'Share classes',
+          },
         },
       ],
     },
   ],
-  views: {
-    view0: {
-      name: null,
-      defaultView: true,
-      defaultSort: 'name',
-      values: [
-        { type: 'FIELD', label: 'name', name: 'name', dataType: 'TEXT', required: true },
-        { type: 'RELATION', label: 'Officer', name: 'officer', relatedClass: 'housekeeping.officer', mostSignificantClass: 'entities', required: true },
-        {
-          type: 'FIELD', label: 'Authority', name: 'authority', dataType: 'LIST', required: false,
-          listItems: [
-            { key: 'SOLE', label: 'Sole authority' },
-            { key: 'JOINT', label: 'Joint authority' },
-          ],
-        },
-        { type: 'FIELD', label: 'start date', name: 'activeDate', dataType: 'DATE', required: false },
-        { type: 'FIELD', label: 'end date', name: 'inactiveDate', dataType: 'DATE', required: false },
-      ],
-      type: 'appointments',
-      singularLabel: 'Appointment',
-      pluralLabel: 'Appointments',
-    },
-    view1: {
-      name: null,
-      defaultView: true,
-      defaultSort: 'name',
-      values: [
-        { type: 'FIELD', label: 'name', name: 'name', dataType: 'TEXT', required: true },
-        { type: 'FIELD', label: 'Nominal value', name: 'nominalValue', dataType: 'TEXT', required: false },
-        { type: 'FIELD', label: 'Currency', name: 'currency', dataType: 'TEXT', required: false },
-        { type: 'FIELD', label: 'Authorised shares', name: 'authorizedShares', dataType: 'INTEGER', required: false },
-      ],
-      type: 'shareClasses',
-      singularLabel: 'Share class',
-      pluralLabel: 'Share classes',
-    },
-  },
-  _links: {
-    view0: { href: '/data/demo/appointments' },
-    view1: { href: '/data/demo/shareClasses' },
-  },
 };
 
 /** Mock appointment rows for the embedded table. */