@mmlogic/components 0.5.12 → 0.5.14

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

@@ -1,7 +1,7 @@
 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 { TEXT_TYPES, NON_INTERACTIVE_TYPES, SEARCH_DEBOUNCE_MS, 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";
@@ -27,6 +27,17 @@ export class MrdTable {
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
         this.viewPopoverClickHandler = null;
+        /** Debounce timer for the free-text search box — separate from debounceTimer
+         *  (pending-page requests), since typing and scrolling debounce independently. */
+        this.searchDebounceTimer = null;
+        /** The rendered search <input>, captured so it can be focused the instant it mounts. */
+        this.searchInputEl = null;
+        /** Set by toggleSearch() when the box just expanded; consumed and cleared in componentDidRender(). */
+        this.searchNeedsFocus = false;
+        /** Column filters stashed by stashFiltersForSearch() while the search box is open — the
+         *  backend can't combine `q` with column filters. Restored by restoreFiltersAfterSearch()
+         *  on close, unless the user applied a fresh filter of their own in the meantime. */
+        this.stashedFilters = null;
         /** Watches the host for gaining a box (e.g. its tab pane being shown) — see componentDidLoad. */
         this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
@@ -61,6 +72,10 @@ export class MrdTable {
         /** 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;
+        /** When true, the toolbar's create ("+") action is disabled (with a tooltip
+         *  explaining why) so a viewer-role user can see at a glance that this dashboard
+         *  is read-only. Sorting, filtering and export stay available — those don't mutate data. */
+        this.readOnly = false;
         // ── Internal state ─────────────────────────────────────────────────────────
         /** Index into allViews[] for the currently displayed view. 0 = primary, 1+ = alternatives. */
         this.activeViewIdx = 0;
@@ -77,6 +92,10 @@ export class MrdTable {
         this.sortDir = 'asc';
         /** Active filters keyed by field name. */
         this.activeFilters = new Map();
+        /** True while the toolbar's magnifying glass is expanded into the search input. */
+        this.searchOpen = false;
+        /** Current free-text search query — sent as `q` on every mrdLoadPage/aggregations request. */
+        this.searchQuery = '';
         /** Field name of the currently open filter popup (null = closed). */
         this.openFilterCol = null;
         /** Filter state being edited in the open popup. */
@@ -130,6 +149,11 @@ export class MrdTable {
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
         this.fixedContentMeasured = false;
+        // A new item is a different table (possibly not even a VIEW any more) — a leftover
+        // query from the old one should not silently keep filtering it.
+        this.searchOpen = false;
+        this.searchQuery = '';
+        this.stashedFilters = null;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -237,7 +261,12 @@ export class MrdTable {
         if (pageNumber === 0 && this.aggregationsPending) {
             this.aggregationsPending = false;
             const hasAggColumns = this.columns.some(c => c.type === 'FIELD' && c.aggregate);
-            if (!isLastPage || hasAggColumns) {
+            // The aggregations endpoint doesn't support the `q` free-text param, so a request
+            // sent while searching would silently return unfiltered totals. Leave aggregations
+            // (and aggregationsTotal) at null instead — TotalsRow already renders nothing when
+            // aggregations is null, so the totals row just disappears for the duration of the
+            // search rather than showing numbers that don't match the filtered rows.
+            if (!this.searchQuery && (!isLastPage || hasAggColumns)) {
                 this.emitLoadAggregations();
             }
         }
@@ -276,10 +305,18 @@ export class MrdTable {
             document.removeEventListener('click', this.viewPopoverClickHandler);
             this.viewPopoverClickHandler = null;
         }
+        if (this.searchDebounceTimer !== null) {
+            clearTimeout(this.searchDebounceTimer);
+            this.searchDebounceTimer = null;
+        }
     }
     componentDidRender() {
         this.freezeColWidths();
         this.growToFixedContent();
+        if (this.searchNeedsFocus && this.searchInputEl) {
+            this.searchInputEl.focus();
+            this.searchNeedsFocus = false;
+        }
     }
     /** Freeze the column widths once the first data page has rendered.
      *
@@ -598,7 +635,13 @@ export class MrdTable {
             dataClass: v.dataClass,
         });
     }
-    /** Build query params for a page request from current sort, view filters, filterClass and active column filters. */
+    /** Build query params for a page request from current sort, view filters, filterClass and active column filters.
+     *
+     *  `q` and column filters are mutually exclusive on the backend — combining them breaks
+     *  the search. stashFiltersForSearch() already empties activeFilters for the duration of
+     *  a search, but this guard is the actual guarantee: even if a filter is applied through
+     *  a column header while the search box is still open (before the query is cleared),
+     *  activeFilters is dropped from the request rather than sent alongside `q`. */
     buildQueryParams(page) {
         var _a;
         const v = this.allViews[this.activeViewIdx];
@@ -607,7 +650,8 @@ export class MrdTable {
             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(),
+            activeFilters: this.searchQuery ? [] : this.activeFilters.values(),
+            query: this.searchQuery,
         });
     }
     /** True when the table is in paginated / virtual-scroll mode rather than driven by the
@@ -630,7 +674,7 @@ export class MrdTable {
         const raw = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.actions) !== null && _b !== void 0 ? _b : [];
         return (raw !== null && raw !== void 0 ? raw : []).reduce((acc, a) => {
             if (a === 'NEW')
-                acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary' });
+                acc.push({ action: 'create', label: t('table_new_record', this.locale), icon: 'assets/sprites.svg#icon-plus', variant: 'primary', disabled: this.readOnly });
             if (a === 'EXPORT')
                 acc.push({ action: 'export', label: t('table_export_excel', this.locale), icon: 'assets/sprites.svg#icon-file-excel' });
             return acc;
@@ -913,6 +957,18 @@ 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) });
     }
+    /** Common reload after activeFilters or searchQuery changed: drop stale aggregations
+     *  (the next setPage(0) re-requests them, guarded against `q` in setPage() itself) and
+     *  re-fetch page 0. Shared by the filter popup, clear-all, and free-text search. */
+    reloadAfterQueryChange() {
+        this.aggregations = null;
+        this.aggregationsTotal = null;
+        this.aggregationsPending = true;
+        if (this.isPaginated) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
     applyFilter() {
         const f = this.pendingFilter;
         if (!(f === null || f === void 0 ? void 0 : f.field)) {
@@ -929,13 +985,7 @@ export class MrdTable {
         }
         this.activeFilters = next;
         this.closeFilterPopup();
-        this.aggregations = null;
-        this.aggregationsTotal = null;
-        this.aggregationsPending = true;
-        if (this.isPaginated) {
-            this.resetPages();
-            this.emitPagesForWindow(this.renderStart, this.renderEnd);
-        }
+        this.reloadAfterQueryChange();
     }
     clearFilter() {
         const name = this.openFilterCol;
@@ -944,23 +994,80 @@ export class MrdTable {
             next.delete(name);
         this.activeFilters = next;
         this.closeFilterPopup();
-        this.aggregations = null;
-        this.aggregationsTotal = null;
-        this.aggregationsPending = true;
-        if (this.isPaginated) {
-            this.resetPages();
-            this.emitPagesForWindow(this.renderStart, this.renderEnd);
-        }
+        this.reloadAfterQueryChange();
     }
     clearAllFilters() {
         this.activeFilters = new Map();
-        this.aggregations = null;
-        this.aggregationsTotal = null;
-        this.aggregationsPending = true;
-        if (this.isPaginated) {
-            this.resetPages();
-            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        this.reloadAfterQueryChange();
+    }
+    // ── Free-text search ───────────────────────────────────────────────────────
+    /** Search is a VIEW-only affordance — a RELATED_VIEW table is already scoped to
+     *  its parent record, so a free-text box there would invite confusion about what
+     *  it searches across. */
+    get searchEnabled() {
+        var _a;
+        return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'VIEW';
+    }
+    toggleSearch() {
+        if (this.searchOpen) {
+            this.closeSearch();
         }
+        else {
+            this.searchOpen = true;
+            this.searchNeedsFocus = true;
+            this.stashFiltersForSearch();
+        }
+    }
+    /** Collapses the box back to the icon. Clearing a non-empty query and restoring any
+     *  stashed filters can each independently require a reload — reloadAfterQueryChange()
+     *  is called at most once here regardless of how many of the two actually changed. */
+    closeSearch() {
+        this.searchOpen = false;
+        if (this.searchDebounceTimer !== null) {
+            clearTimeout(this.searchDebounceTimer);
+            this.searchDebounceTimer = null;
+        }
+        const hadQuery = this.searchQuery !== '';
+        this.searchQuery = '';
+        const filtersRestored = this.restoreFiltersAfterSearch();
+        if (hadQuery || filtersRestored)
+            this.reloadAfterQueryChange();
+    }
+    handleSearchInput(value) {
+        this.searchQuery = value;
+        if (this.searchDebounceTimer !== null)
+            clearTimeout(this.searchDebounceTimer);
+        this.searchDebounceTimer = setTimeout(() => this.applySearch(), SEARCH_DEBOUNCE_MS);
+    }
+    /** Reloads from page 0 with the current searchQuery, same reset as applyFilter(). */
+    applySearch() {
+        this.searchDebounceTimer = null;
+        this.reloadAfterQueryChange();
+    }
+    /** Column filters and the free-text `q` param are mutually exclusive on the backend —
+     *  sending both breaks the search. Opening the search box stashes any active filters
+     *  and clears them (the header filter icons and the clear-all button disappear along
+     *  with activeFilters, so there is nothing extra to hide) and reloads unfiltered. */
+    stashFiltersForSearch() {
+        if (this.activeFilters.size === 0)
+            return;
+        this.stashedFilters = this.activeFilters;
+        this.activeFilters = new Map();
+        this.reloadAfterQueryChange();
+    }
+    /** Restores filters stashed by stashFiltersForSearch(), unless the user applied a fresh
+     *  filter of their own while the search box was open — that explicit choice wins over
+     *  reinstating the old one. Returns whether activeFilters actually changed, so the
+     *  caller can decide whether a reload is needed. */
+    restoreFiltersAfterSearch() {
+        if (!this.stashedFilters)
+            return false;
+        const stashed = this.stashedFilters;
+        this.stashedFilters = null;
+        if (this.activeFilters.size > 0)
+            return false;
+        this.activeFilters = stashed;
+        return true;
     }
     // ── View switcher ──────────────────────────────────────────────────────────
     handleViewSwitch(targetIdx) {
@@ -971,6 +1078,9 @@ export class MrdTable {
         this.activeViewIdx = targetIdx;
         this.applyDefaultSort((_b = (_a = target.view) === null || _a === void 0 ? void 0 : _a.defaultSort) !== null && _b !== void 0 ? _b : '');
         this.activeFilters = new Map();
+        this.searchOpen = false;
+        this.searchQuery = '';
+        this.stashedFilters = null;
         this.init();
     }
     toggleViewPopover(e) {
@@ -993,7 +1103,7 @@ export class MrdTable {
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
         var _a;
-        return (h(Toolbar, { locale: this.locale, 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: {
+        return (h(Toolbar, { locale: this.locale, 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, readOnly: this.readOnly, searchEnabled: this.searchEnabled, searchOpen: this.searchOpen, searchQuery: this.searchQuery, cb: {
                 onClearAllFilters: () => this.clearAllFilters(),
                 onViewSwitch: idx => this.handleViewSwitch(idx),
                 onToggleViewPopover: e => this.toggleViewPopover(e),
@@ -1004,6 +1114,10 @@ export class MrdTable {
                     this.closeCreatePicker();
                 },
                 onAction: action => this.mrdAction.emit(this.buildActionDetail(action)),
+                onToggleSearch: () => this.toggleSearch(),
+                onSearchInput: value => this.handleSearchInput(value),
+                onCloseSearch: () => this.closeSearch(),
+                onSearchInputRef: el => (this.searchInputEl = el !== null && el !== void 0 ? el : null),
             } }));
     }
     // ── Render: filter popup ───────────────────────────────────────────────────
@@ -1338,6 +1452,26 @@ export class MrdTable {
                 "reflect": false,
                 "attribute": "request-timeout-ms",
                 "defaultValue": "15000"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the toolbar's create (\"+\") action is disabled (with a tooltip\nexplaining why) so a viewer-role user can see at a glance that this dashboard\nis read-only. Sorting, filtering and export stay available \u2014 those don't mutate data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
             }
         };
     }
@@ -1354,6 +1488,8 @@ export class MrdTable {
             "sortField": {},
             "sortDir": {},
             "activeFilters": {},
+            "searchOpen": {},
+            "searchQuery": {},
             "openFilterCol": {},
             "pendingFilter": {},
             "popupPos": {},

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

@@ -8,6 +8,7 @@ import { NUMERIC_TYPES } from "./table-query";
  * 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" }))));
+export const SearchIcon = ({ class: cls }) => (h("svg", { class: cls, viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14" })));
 const TEXTBLOCK_MAX = 200;
 export const TableCell = ({ col, row, locale, onDownload, onOpenTextblock, onOpenJson }) => {
     var _a, _b, _c;
@@ -87,24 +88,31 @@ export const JsonModal = ({ html, locale, onClose }) => {
         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, filterCount, actions, views, activeViewIdx, viewPopoverOpen, createPickerOpen, createTypes, cb }) => {
+export const Toolbar = ({ locale, filterCount, actions, views, activeViewIdx, viewPopoverOpen, createPickerOpen, createTypes, readOnly, searchEnabled, searchOpen, searchQuery, 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" }, filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary mrd-table__filter-clear", 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__filter-clear-label" }, t('table_filter_clear_all', locale), " (", filterCount, ")")))), 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: () => {
+    return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, searchEnabled && (searchOpen ? (h("span", { class: "mrd-table__search-box" }, h(SearchIcon, null), h("input", { type: "text", class: "mrd-table__search-input", value: searchQuery !== null && searchQuery !== void 0 ? searchQuery : '', placeholder: t('search_placeholder', locale), ref: cb.onSearchInputRef, onInput: (e) => cb.onSearchInput(e.target.value), onKeyDown: (e) => {
+            if (e.key === 'Escape')
+                cb.onCloseSearch();
+        } }), h("button", { type: "button", class: "mrd-table__search-clear", "aria-label": t('clear', locale), onClick: cb.onCloseSearch }, "\u2715"))) : (h("button", { type: "button", class: "mrd-table__action mrd-table__action--secondary mrd-table__search-toggle", onClick: cb.onToggleSearch }, h(SearchIcon, { class: "mrd-table__action-icon" }), h("span", { class: "mrd-table__action-tooltip" }, t('table_search', locale))))), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary mrd-table__filter-clear", 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__filter-clear-label" }, t('table_filter_clear_all', locale), " (", filterCount, ")")))), 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;
+        // readOnly only ever disables 'create' (see mrd-table.tsx tableActions) — export,
+        // sorting and filtering don't mutate data and stay available.
+        const disabled = a.disabled || (readOnly && a.action === 'create');
+        const tooltip = disabled && readOnly ? t('readonly_access', locale) : a.label;
         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
+            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'}`, disabled: disabled, 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)))))));
+                : a.label, h("span", { class: "mrd-table__action-tooltip" }, tooltip)), 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
+        return (h("button", { key: `action-${a.action}`, class: `mrd-table__action mrd-table__action--${(_b = a.variant) !== null && _b !== void 0 ? _b : 'secondary'}`, disabled: 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)));
+            : a.label, h("span", { class: "mrd-table__action-tooltip" }, tooltip)));
     })))));
 };

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

@@ -9,6 +9,10 @@ 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']);
+/** Wait this long (ms) after the user stops typing in the free-text search box
+ *  before firing the search request — mirrors REQUEST_DEBOUNCE_MS's purpose
+ *  (skip intermediate keystrokes) but is tuned for typing, not scrolling. */
+export const SEARCH_DEBOUNCE_MS = 400;
 export function parseDefaultSort(defaultSort) {
     var _a;
     if (!defaultSort)
@@ -33,6 +37,8 @@ export function buildTableQueryParams(opts) {
     if (opts.filterClass)
         p.set('type', opts.filterClass);
     applyViewFilters(p, opts.viewFilters);
+    if (opts.query)
+        p.set('q', opts.query);
     for (const f of opts.activeFilters) {
         if (f.operator === 'isEmpty') {
             p.set(f.field, '');

package/dist/collection/dev/app.js

@@ -14,6 +14,8 @@ let _dashboardType     = 'class'; // 'class' | 'general' | 'navigation' | 'objec
 let _sectionGeneration = 0;       // incremented on each renderSection(); prevents stale fetches
 let _navHistory        = [];      // stack van { dashboardData, dashboardRecord, activeLayoutIndex }
 let _meUser            = null;    // { id: href, label: name } — resolved once after login via /accounts/me
+let _detailReadOnly    = false;   // Detail View tab: readOnly toggle (TASK-0248 demo)
+let _liveApiReadOnly   = false;   // Live API tab: readOnly toggle (TASK-0248 demo)
 
 /* =====================================================================
    UTILITIES
@@ -135,6 +137,7 @@ async function initDetailViewTab() {
   table.totalElements = window.EXAMPLE_COMPANIES.length;
   table.pageSize      = 20;
   table.locale        = _locale;
+  table.readOnly      = _detailReadOnly;
 
   // Register before init(): init() emits mrdLoadPage for page 0 itself.
   table.addEventListener('mrdLoadPage', async (e) => {
@@ -175,6 +178,7 @@ function showCompanyDetail(row) {
     section.items = layout.items;
     section.data  = company;
     section.locale = _locale;
+    section.readOnly = _detailReadOnly;
 
     section.addEventListener('mrdNavigate', (e) => {
       logEvent('mrdNavigate', e.detail);
@@ -199,6 +203,17 @@ function showCompanyList() {
   document.getElementById('detail-table-panel').style.display = 'block';
 }
 
+/** readOnly demo (TASK-0248): flips the companies table and any rendered
+ *  detail sections without re-fetching — readOnly is a pure render-time prop. */
+function onDetailViewReadOnlyToggle(checked) {
+  _detailReadOnly = checked;
+  const table = document.getElementById('companies-table');
+  if (table) table.readOnly = checked;
+  document.querySelectorAll('#detail-sections mrd-layout-section').forEach((section) => {
+    section.readOnly = checked;
+  });
+}
+
 /* =====================================================================
    DOCUMENT PREVIEW TAB
    ===================================================================== */
@@ -494,6 +509,7 @@ async function renderSection(index) {
   section.items  = layout.items;
   section.data   = _dashboardRecord ?? { _links: _dashboardData._links ?? {} };
   section.locale = _locale;
+  section.readOnly = _liveApiReadOnly;
   // Dashboard-level archetypes describe the object itself → single-document view.
   // Only apply to the main object layout, not tab-page (related) layouts.
   section.archetypes = (!layout.tabPage && _dashboardData.archetypes) ? _dashboardData.archetypes : [];
@@ -670,6 +686,14 @@ async function renderSection(index) {
 }
 
 
+/** readOnly demo (TASK-0248): flips the currently rendered section without
+ *  re-fetching — readOnly is a pure render-time prop, no reload needed. */
+function onLiveApiReadOnlyToggle(checked) {
+  _liveApiReadOnly = checked;
+  const section = document.querySelector('#sections-container mrd-layout-section');
+  if (section) section.readOnly = checked;
+}
+
 function toggleJsonViewer() {
   const viewer = document.getElementById('json-viewer');
   const btn    = document.getElementById('btn-json-toggle');

package/dist/collection/utils/i18n.js

@@ -31,8 +31,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'Alle filters wissen',
+        table_search: 'Zoeken',
         table_new_record: 'Nieuw record',
         table_export_excel: 'Exporteer naar Excel',
+        readonly_access: 'Je hebt alleen-leestoegang',
         doc_view_switch: 'Weergave wisselen',
         doc_view_tree: 'Boomweergave',
         doc_upload: 'Uploaden',
@@ -134,8 +136,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'Clear all filters',
+        table_search: 'Search',
         table_new_record: 'New record',
         table_export_excel: 'Export to Excel',
+        readonly_access: 'You have read-only access',
         doc_view_switch: 'Switch view',
         doc_view_tree: 'Tree view',
         doc_upload: 'Upload',
@@ -237,8 +241,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'مسح جميع الفلاتر',
+        table_search: 'بحث',
         table_new_record: 'سجل جديد',
         table_export_excel: 'تصدير إلى Excel',
+        readonly_access: 'لديك حق الوصول للقراءة فقط',
         doc_view_switch: 'تبديل العرض',
         doc_view_tree: 'عرض شجري',
         doc_upload: 'رفع',
@@ -334,8 +340,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'Effacer tous les filtres',
+        table_search: 'Rechercher',
         table_new_record: 'Nouvel enregistrement',
         table_export_excel: 'Exporter vers Excel',
+        readonly_access: "Vous disposez d'un accès en lecture seule",
         doc_view_switch: 'Changer de vue',
         doc_view_tree: 'Vue arborescente',
         doc_upload: 'Téléverser',
@@ -431,8 +439,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'Alle Filter löschen',
+        table_search: 'Suchen',
         table_new_record: 'Neuer Eintrag',
         table_export_excel: 'Als Excel exportieren',
+        readonly_access: 'Sie haben nur Lesezugriff',
         doc_view_switch: 'Ansicht wechseln',
         doc_view_tree: 'Baumansicht',
         doc_upload: 'Hochladen',
@@ -528,8 +538,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'Borrar todos los filtros',
+        table_search: 'Buscar',
         table_new_record: 'Nuevo registro',
         table_export_excel: 'Exportar a Excel',
+        readonly_access: 'Tienes acceso de solo lectura',
         doc_view_switch: 'Cambiar vista',
         doc_view_tree: 'Vista de árbol',
         doc_upload: 'Subir',
@@ -625,8 +637,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'Cancella tutti i filtri',
+        table_search: 'Cerca',
         table_new_record: 'Nuovo record',
         table_export_excel: 'Esporta in Excel',
+        readonly_access: 'Hai accesso in sola lettura',
         doc_view_switch: 'Cambia vista',
         doc_view_tree: 'Vista ad albero',
         doc_upload: 'Carica',
@@ -722,8 +736,10 @@ const translations = {
         value_empty: '—',
         // mrd-table toolbar
         table_filter_clear_all: 'Очистити всі фільтри',
+        table_search: 'Пошук',
         table_new_record: 'Новий запис',
         table_export_excel: 'Експортувати до Excel',
+        readonly_access: 'У вас доступ лише для перегляду',
         doc_view_switch: 'Змінити вигляд',
         doc_view_tree: 'Деревоподібний вигляд',
         doc_upload: 'Завантажити',