@cube-nl/dmp-sdk 1.0.0-rc.4 → 1.1.0-rc.2

package/dist/ui/blocks/table.js

@@ -0,0 +1,666 @@
+import { CARD_CSS, PeriodFollower, requiredAttr, wholeAttr } from '../aggregate-block.js';
+import { AuthorError } from '../author-error.js';
+import { exampleBadge, stateFor } from '../block.js';
+import { downloadCsv, toCsv } from '../csv.js';
+import { clear, h } from '../dom.js';
+import { choicesFor, columnsFor, fieldList, readFieldConfigs } from '../fields.js';
+import { formatValue, humanize, isoDate, NUMERIC_FORMATS, parseLocalDate, toNumber } from '../format.js';
+import { parseInput } from '../inputs.js';
+import { blockFilter, dateFieldFor, periodFilter, resolvePeriodSource } from '../query.js';
+import { NL } from '../texts.js';
+const CSS = `${CARD_CSS}
+.tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;margin-bottom:.75rem}
+.control{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%}
+.control>label,legend{font-weight:600}
+fieldset{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}
+fieldset legend{padding:0;margin-bottom:.25rem}
+fieldset.control{flex-direction:row;align-items:flex-end}
+.scroll{position:relative;overflow-x:auto;max-width:100%}
+table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
+th,td{padding:.5rem .75rem;text-align:start;border-bottom:1px solid var(--cube-color-border)}
+th{font-weight:600;white-space:nowrap}
+th button{min-height:auto;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600}
+th button:hover{background:none;text-decoration:underline}
+th[aria-sort=ascending] .arrow::after{content:" ▲"}
+th[aria-sort=descending] .arrow::after{content:" ▼"}
+.num{text-align:end;white-space:nowrap}
+tbody tr{cursor:pointer}
+tbody tr:hover{background:var(--cube-color-primary-subtle)}
+tbody tr:focus-visible{outline:3px solid var(--cube-color-focus);outline-offset:-3px}
+tbody tr.chosen{background:var(--cube-color-primary-subtle);box-shadow:inset 4px 0 0 var(--cube-color-primary)}
+.pager{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}
+.pager p,.export-status{margin:0;color:var(--cube-color-text-muted)}
+.pager p{margin-inline-end:auto}
+`;
+const NUMERIC = NUMERIC_FORMATS;
+const MAX_PAGE = 200;
+const EXPORT_PAGES = 50;
+const DEBOUNCE = 300;
+/** The key of the search box in `values`; no field name contains a space. */
+const SEARCH = ' search';
+/** The day after `day`, for an `lt` bound that keeps the whole of `day` for dates and date-times alike. */
+function dayAfter(day) {
+    const date = parseLocalDate(day.slice(0, 10));
+    if (date === null)
+        return null;
+    date.setDate(date.getDate() + 1);
+    return isoDate(date);
+}
+const isOps = (v) => v !== null && typeof v === 'object' && !Array.isArray(v);
+/** Two operator objects on one field are joined; anything else is replaced by the later one. */
+function merge(target, field, value) {
+    const current = target[field];
+    target[field] = isOps(current) && isOps(value) ? { ...current, ...value } : value;
+}
+/** -1, 0 or 1; numbers (also a number written as text) as numbers, anything else (ISO dates) as text. */
+function compare(a, b) {
+    const x = toNumber(a);
+    const y = toNumber(b);
+    if (x !== null && y !== null)
+        return Math.sign(x - y);
+    const p = String(a);
+    const q = String(b);
+    return p < q ? -1 : p > q ? 1 : 0;
+}
+/** Whether a base value leaves a "contains" (ilike) control nothing: a fixed value, or an ilike of its own. */
+function textFixed(base) {
+    return base !== undefined && (!isOps(base) || 'ilike' in base);
+}
+/**
+ * What the controls ask for, within the base (the `filter` attribute and the followed period): a bound takes the
+ * stricter of the two, and the base keeps any value it fixes. The controls can narrow the base, never widen it.
+ */
+function within(base, value) {
+    if (!isOps(base) || !isOps(value))
+        return base;
+    const result = { ...value, ...base };
+    for (const [op, pick] of [['gte', 1], ['gt', 1], ['lte', -1], ['lt', -1]]) {
+        const a = base[op];
+        const b = value[op];
+        if (a !== undefined && a !== null && b !== undefined && b !== null) {
+            result[op] = compare(b, a) === pick ? b : a;
+        }
+    }
+    return result;
+}
+/**
+ * `<cube-table>`: the rows of a resource, a page at a time, with search, filters, sortable headers and a CSV export.
+ * The controls are built once per load; what they change only asks for rows again, and only the newest answer is
+ * shown.
+ */
+export function tableBlock(Base, scope) {
+    const doc = scope.document;
+    class CubeTable extends Base {
+        static tag = 'cube-table';
+        static css = CSS;
+        period = new PeriodFollower(this);
+        context = null;
+        parts = new Map();
+        /** What the person typed or chose in each control, by field (`placed_on:min` for a bound). */
+        values = new Map();
+        sortBy = null;
+        page = 1;
+        requests = 0;
+        rowsController = null;
+        debounce = null;
+        exporting = null;
+        headers = new Map();
+        frame = null;
+        table = null;
+        pagerText = null;
+        previous = null;
+        next = null;
+        pager = null;
+        exportButton = null;
+        exportStatus = null;
+        /** The resource the kept values, sort and page belong to. */
+        shownResource = null;
+        /** The id of the chosen row, and the ids of the rows shown: a different set clears the choice. */
+        chosen = null;
+        shownIds = null;
+        updates = 0;
+        /** The builder warnings given already: a reload does not repeat them. */
+        warned = new Set();
+        shownFields() {
+            return this.context?.columns.map((column) => column.name) ?? [];
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.stopDebounce();
+            this.rowsController?.abort();
+            this.exporting?.abort();
+            this.exporting = null;
+        }
+        async load(signal, session) {
+            if (session === null)
+                return;
+            // The old controls are gone (the loading state replaced them): nothing they asked for may land now.
+            this.stopDebounce();
+            this.context = null;
+            this.rowsController?.abort();
+            const resource = requiredAttr(this, 'resource');
+            ++this.updates;
+            if (resource !== this.shownResource) {
+                // Another resource: what the person chose belonged to the old one.
+                this.values.clear();
+                this.sortBy = null;
+                this.page = 1;
+                this.chosen = null;
+                this.shownIds = null;
+                this.shownResource = resource;
+            }
+            this.detailTarget();
+            const selector = this.attr('period');
+            const dateField = selector === null || selector === ''
+                ? null
+                : dateFieldFor(this.attr('date-field'), null, this.localName);
+            const filter = blockFilter(this);
+            const source = await resolvePeriodSource(this, selector);
+            if (signal.aborted)
+                return;
+            this.period.follow(source);
+            const base = source === null || dateField === null
+                ? filter
+                : { ...filter, ...periodFilter(dateField, source.value) };
+            const schema = await session.schema(resource);
+            if (signal.aborted)
+                return;
+            const names = fieldList(this.attr('fields'));
+            const hasId = schema === null || schema.fields.some((field) => field.name === 'id');
+            const context = {
+                session,
+                resource,
+                columns: [],
+                base,
+                fields: names === null ? undefined : [...new Set([...(hasId ? ['id'] : []), ...names])],
+                size: Math.min(wholeAttr(this, 'page-size', 1, 25), MAX_PAGE),
+            };
+            this.exporting?.abort();
+            this.exporting = null;
+            signal.addEventListener('abort', () => this.rowsController?.abort(), { once: true });
+            const asked = fieldList(this.attr('filters')) ?? [];
+            this.checkFilterable(schema, asked);
+            // A field the `filter` fixes to one value has nothing left to choose.
+            const filterNames = asked.filter((name) => !(name in filter) || isOps(filter[name]));
+            for (const name of [...this.parts.keys()])
+                if (!filterNames.includes(name))
+                    this.parts.delete(name);
+            const configs = readFieldConfigs(this);
+            // The controls exist only after this answer, so they cannot have asked for anything yet.
+            this.context = context;
+            const first = await this.fetchRows(context, this.query(context, context.size, this.page));
+            const response = first === null ? null : await this.lastPageIfPast(context, first);
+            if (response === null || signal.aborted)
+                return;
+            const sample = response.data[0];
+            context.columns = columnsFor(schema, names, configs, sample);
+            const unhidden = new Map([...configs].map(([name, config]) => [name, { ...config, hidden: false }]));
+            const filterColumns = columnsFor(schema, filterNames, unhidden, sample);
+            this.build(context, schema, filterColumns);
+            this.renderRows(context, response);
+        }
+        /** `filters` and `search` may only name fields the resource can be filtered on (when the schema says). */
+        checkFilterable(schema, filters) {
+            if (schema === null)
+                return;
+            const search = this.attr('search')?.trim() ?? '';
+            const named = filters.map((name) => ['filters', name]);
+            if (search !== '')
+                named.push(['search', search]);
+            for (const [attribute, field] of named) {
+                if (!schema.filterable.includes(field)) {
+                    throw new AuthorError(NL.invalid.notFilterable(this.localName, attribute, field));
+                }
+            }
+        }
+        /** The element `detail` names, or null without one; an invalid selector is the author's error. */
+        detailTarget() {
+            const selector = this.attr('detail')?.trim() ?? '';
+            if (selector === '')
+                return null;
+            try {
+                return doc.querySelector(selector);
+            }
+            catch {
+                throw new AuthorError(NL.invalid.selector(this.localName, 'detail', selector));
+            }
+        }
+        /** The list query of the controls as they are now. */
+        query(context, size, number) {
+            const asked = {};
+            const searchField = this.attr('search')?.trim() ?? '';
+            const term = this.values.get(SEARCH)?.trim() ?? '';
+            if (searchField !== '' && term !== '')
+                merge(asked, searchField, { ilike: `%${term}%` });
+            for (const [field, part] of this.parts) {
+                const value = part();
+                if (value !== null)
+                    merge(asked, field, value);
+            }
+            const filter = { ...context.base };
+            for (const [field, value] of Object.entries(asked)) {
+                const base = filter[field];
+                filter[field] = base === undefined ? value : within(base, value);
+            }
+            const sort = this.sortBy ?? (this.attr('sort')?.trim() || null);
+            const query = { filter, page: { size, number } };
+            if (sort !== null)
+                query.sort = sort;
+            if (context.fields !== undefined)
+                query.fields = context.fields;
+            return query;
+        }
+        /** Asks for one page; null when a newer request was made meanwhile (its answer is the one shown). */
+        async fetchRows(context, query) {
+            const id = ++this.requests;
+            this.rowsController?.abort();
+            const controller = new AbortController();
+            this.rowsController = controller;
+            this.setAttribute('aria-busy', 'true');
+            try {
+                const response = await context.session.resource(context.resource).list(query, {
+                    signal: controller.signal,
+                });
+                return id === this.requests && !controller.signal.aborted ? response : null;
+            }
+            finally {
+                if (id === this.requests)
+                    this.removeAttribute('aria-busy');
+            }
+        }
+        /**
+         * An empty page past the end (rows were removed while it was open, say) when the set has rows: the last page
+         * instead, so the pager stays usable. Null when a newer request was made meanwhile.
+         */
+        async lastPageIfPast(context, response) {
+            const meta = response.meta.page;
+            if (response.data.length > 0 || this.page <= 1 || meta === undefined || meta === null || meta.total === 0) {
+                return response;
+            }
+            this.page = Math.max(1, meta.pages);
+            return this.fetchRows(context, this.query(context, context.size, this.page));
+        }
+        /** After a control changed: the rows again, or a state in their place. The controls stay. */
+        async update(resetPage) {
+            const context = this.context;
+            if (context === null || !this.isConnected)
+                return;
+            if (resetPage)
+                this.page = 1;
+            // Per update, not per request: the retry for the last page is part of this one, and so is its failure.
+            const run = ++this.updates;
+            try {
+                const first = await this.fetchRows(context, this.query(context, context.size, this.page));
+                const response = first === null ? null : await this.lastPageIfPast(context, first);
+                if (response !== null)
+                    this.renderRows(context, response);
+            }
+            catch (error) {
+                if (run !== this.updates || error?.name === 'AbortError')
+                    return;
+                this.showRowsState(stateFor(error));
+            }
+        }
+        later(resetPage) {
+            this.stopDebounce();
+            this.debounce = scope.setTimeout(() => {
+                this.debounce = null;
+                void this.update(resetPage);
+            }, DEBOUNCE);
+        }
+        stopDebounce() {
+            if (this.debounce !== null)
+                scope.clearTimeout(this.debounce);
+            this.debounce = null;
+        }
+        build(context, schema, filterColumns) {
+            this.parts = new Map();
+            const tools = [];
+            const searchField = this.attr('search')?.trim() ?? '';
+            if (searchField !== '') {
+                if (textFixed(context.base[searchField]))
+                    this.warnFixed('search', searchField);
+                const input = h(doc, 'input', { type: 'search' });
+                tools.push(this.control(input, SEARCH, NL.search, true));
+            }
+            for (const column of filterColumns)
+                tools.push(this.filterControl(column, context.base[column.name]));
+            if (this.flag('export')) {
+                this.exportButton = h(doc, 'button', {
+                    type: 'button',
+                    class: 'secondary',
+                    onclick: () => this.toggleExport(),
+                }, NL.exportCsv);
+                this.exportStatus = h(doc, 'p', { class: 'export-status', role: 'status' });
+                tools.push(this.exportButton, this.exportStatus);
+            }
+            else {
+                this.exportButton = null;
+                this.exportStatus = null;
+            }
+            this.headers = new Map();
+            this.frame = h(doc, 'div', { class: 'scroll' });
+            this.pagerText = h(doc, 'p', { 'aria-live': 'polite' });
+            this.previous = h(doc, 'button', {
+                type: 'button',
+                class: 'secondary',
+                onclick: () => this.go(-1),
+            }, NL.previous);
+            this.next = h(doc, 'button', {
+                type: 'button',
+                class: 'secondary',
+                onclick: () => this.go(1),
+            }, NL.next);
+            this.pager = h(doc, 'div', { class: 'pager' }, this.pagerText, this.previous, this.next);
+            const thead = h(doc, 'thead', {}, h(doc, 'tr', {}, ...context.columns.map((column) => {
+                const sortable = schema?.sortable.includes(column.name) === true;
+                const th = h(doc, 'th', { scope: 'col', class: NUMERIC.includes(column.format) ? 'num' : null }, sortable
+                    ? h(doc, 'button', { type: 'button', onclick: () => this.sortOn(column.name) }, column.label, 
+                    // The arrow is decoration: aria-sort already says the direction.
+                    h(doc, 'span', { class: 'arrow', 'aria-hidden': 'true' }))
+                    : column.label, ...(this.exampleField(context.session, context.resource, column.name)
+                    ? [' ', exampleBadge(doc)]
+                    : []));
+                if (sortable)
+                    this.headers.set(column.name, th);
+                return th;
+            })));
+            this.table = h(doc, 'table', {}, h(doc, 'caption', { class: 'sr-only' }, humanize(context.resource)), thead, h(doc, 'tbody'));
+            this.markSort();
+            clear(this.body);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, tools.length > 0 ? h(doc, 'div', { class: 'tools' }, ...tools) : null, this.frame, this.pager));
+        }
+        /**
+         * A labelled control whose text is kept in `values` under `key`, so a reload (an edit elsewhere, a changed
+         * attribute) rebuilds it as the person left it. `wait` debounces typing; otherwise a change asks at once.
+         */
+        control(control, key, label, wait, onInput) {
+            const id = `cube-table-${++controlIds}`;
+            control.id = id;
+            control.value = this.values.get(key) ?? '';
+            onInput?.(control);
+            control.addEventListener(wait ? 'input' : 'change', () => {
+                this.values.set(key, control.value);
+                onInput?.(control);
+                if (wait)
+                    this.later(true);
+                else
+                    void this.update(true);
+            });
+            return h(doc, 'div', { class: 'control' }, h(doc, 'label', { for: id }, label), control);
+        }
+        /**
+         * The `filter` attribute keeps what it fixes (the base wins), so a control on such a field changes nothing:
+         * the builder is told once, in the console.
+         */
+        warnFixed(attribute, field) {
+            const name = this.localName;
+            const message = `${name}: filter already fixes "${field}", so ${attribute} on it changes nothing.`;
+            if (this.warned.has(message))
+                return;
+            this.warned.add(message);
+            console.warn(message);
+        }
+        /** The control for one `filters` field, and its part of the query; `base` is what the base holds for it. */
+        filterControl(column, base) {
+            const name = column.name;
+            const value = (key) => this.values.get(key)?.trim() ?? '';
+            const choices = choicesFor(column);
+            const boolean = choices === null && column.format === 'boolean';
+            if (choices !== null || boolean) {
+                // `within` keeps an operator base over the chosen value.
+                if (isOps(base))
+                    this.warnFixed('filters', name);
+                const options = choices ?? [{ value: 'true', label: NL.yes }, { value: 'false', label: NL.no }];
+                const select = h(doc, 'select', {}, h(doc, 'option', { value: '' }, NL.all), ...options.map((option) => h(doc, 'option', { value: option.value }, option.label)));
+                const numeric = NUMERIC.includes(column.format);
+                this.parts.set(name, () => {
+                    const chosen = value(name);
+                    if (chosen === '')
+                        return null;
+                    return boolean ? chosen === 'true' : numeric ? (toNumber(chosen) ?? chosen) : chosen;
+                });
+                return this.control(select, name, column.label, false);
+            }
+            const dates = column.format === 'date' || column.format === 'datetime';
+            if (!dates && !NUMERIC.includes(column.format)) {
+                if (textFixed(base))
+                    this.warnFixed('filters', name);
+                this.parts.set(name, () => (value(name) === '' ? null : { ilike: `%${value(name)}%` }));
+                return this.control(h(doc, 'input', { type: 'text' }), name, column.label, true);
+            }
+            // Typed the Dutch way (1.234,5); what cannot be read as a number is marked and left out of the query.
+            const number = (key) => {
+                const parsed = parseInput(value(key), column.format);
+                return 'value' in parsed && typeof parsed.value === 'number' ? parsed.value : null;
+            };
+            const mark = (key) => (input) => {
+                if (value(key) !== '' && number(key) === null)
+                    input.setAttribute('aria-invalid', 'true');
+                else
+                    input.removeAttribute('aria-invalid');
+            };
+            const bound = (role) => {
+                const key = `${name}:${role}`;
+                const input = h(doc, 'input', {
+                    type: dates ? 'date' : 'text',
+                    inputmode: dates ? null : 'decimal',
+                    // Two filters both have a Vanaf: the name says which field it bounds.
+                    'aria-label': `${NL[role]} (${column.label})`,
+                });
+                return this.control(input, key, NL[role], !dates, dates ? undefined : mark(key));
+            };
+            this.parts.set(name, () => {
+                const ops = {};
+                const low = dates ? value(`${name}:min`) || null : number(`${name}:min`);
+                const high = dates ? dayAfter(value(`${name}:max`)) : number(`${name}:max`);
+                if (low !== null)
+                    ops.gte = low;
+                if (high !== null)
+                    ops[dates ? 'lt' : 'lte'] = high;
+                return Object.keys(ops).length > 0 ? ops : null;
+            });
+            const legend = h(doc, 'legend', {}, column.label);
+            return h(doc, 'fieldset', { class: 'control' }, legend, bound('min'), bound('max'));
+        }
+        sortOn(field) {
+            const current = this.sortBy ?? (this.attr('sort')?.trim() || null);
+            this.sortBy = current === field ? `-${field}` : field;
+            this.markSort();
+            void this.update(true);
+        }
+        markSort() {
+            const sort = this.sortBy ?? (this.attr('sort')?.trim() || '');
+            const field = sort.replace(/^-/, '');
+            for (const [name, th] of this.headers) {
+                if (name === field)
+                    th.setAttribute('aria-sort', sort.startsWith('-') ? 'descending' : 'ascending');
+                else
+                    th.removeAttribute('aria-sort');
+            }
+        }
+        go(step) {
+            this.page = Math.max(1, this.page + step);
+            void this.update(false);
+        }
+        renderRows(context, response) {
+            const frame = this.frame;
+            const table = this.table;
+            if (frame === null || table === null)
+                return;
+            const meta = response.meta.page;
+            const total = meta?.total ?? response.data.length;
+            const pages = Math.max(1, meta?.pages ?? 1);
+            this.page = meta?.number ?? this.page;
+            clear(frame);
+            const ids = JSON.stringify(response.data.map((row) => row.id ?? null));
+            if (ids !== this.shownIds)
+                this.chosen = null;
+            this.shownIds = ids;
+            if (response.data.length === 0) {
+                this.showRowsState({ kind: 'empty', detail: null });
+                return;
+            }
+            const tbody = h(doc, 'tbody', {}, ...response.data.map((row) => this.row(context, row)));
+            // Roving tabindex: one row is in the Tab order, the chosen one if shown, else the first.
+            if (tbody.querySelector('tr[tabindex="0"]') === null) {
+                tbody.firstElementChild?.setAttribute('tabindex', '0');
+            }
+            table.replaceChild(tbody, table.querySelector('tbody'));
+            frame.appendChild(table);
+            if (this.pager !== null)
+                this.pager.hidden = false;
+            if (this.pagerText !== null)
+                this.pagerText.textContent = NL.pageOf(this.page, pages, total);
+            if (this.previous !== null)
+                this.previous.disabled = this.page <= 1;
+            if (this.next !== null)
+                this.next.disabled = this.page >= pages;
+        }
+        showRowsState(state) {
+            if (this.frame === null)
+                return;
+            clear(this.frame);
+            this.frame.appendChild(h(doc, 'cube-state', {
+                kind: state.kind,
+                message: state.detail,
+                retry: state.retry === false ? 'false' : null,
+            }));
+            if (this.pager !== null)
+                this.pager.hidden = true;
+        }
+        row(context, row) {
+            const choose = () => this.select(context, row, tr);
+            const example = (column) => this.exampleField(context.session, context.resource, column.name);
+            const chosen = this.chosen !== null && String(row.id ?? '') === this.chosen;
+            const tr = h(doc, 'tr', {
+                tabindex: chosen ? '0' : '-1',
+                class: chosen ? 'chosen' : null,
+                'aria-current': chosen ? 'true' : null,
+                onclick: choose,
+                onkeydown: ((event) => {
+                    if (event.altKey || event.ctrlKey || event.metaKey)
+                        return;
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        // Space would scroll the page.
+                        event.preventDefault();
+                        choose();
+                        return;
+                    }
+                    const target = this.rowFor(tr, event.key);
+                    if (target === undefined)
+                        return;
+                    event.preventDefault();
+                    if (target === null)
+                        return;
+                    tr.setAttribute('tabindex', '-1');
+                    target.setAttribute('tabindex', '0');
+                    target.focus();
+                }),
+            }, ...context.columns.map((column) => {
+                const classes = [NUMERIC.includes(column.format) && 'num', example(column) && 'example'];
+                return h(doc, 'td', { class: classes.filter(Boolean).join(' ') || null }, formatValue(row[column.name], column.format));
+            }));
+            return tr;
+        }
+        /** The row an arrow, Home or End key moves to: null at an end, undefined for any other key. */
+        rowFor(tr, key) {
+            const body = tr.parentElement;
+            switch (key) {
+                case 'ArrowDown':
+                    return tr.nextElementSibling;
+                case 'ArrowUp':
+                    return tr.previousElementSibling;
+                case 'Home':
+                    return body?.firstElementChild;
+                case 'End':
+                    return body?.lastElementChild;
+                default:
+                    return undefined;
+            }
+        }
+        select(context, row, tr) {
+            const id = row.id ?? null;
+            this.chosen = id === null ? null : String(id);
+            for (const other of Array.from(tr.parentElement?.children ?? [])) {
+                other.classList.toggle('chosen', other === tr);
+                other.setAttribute('tabindex', other === tr ? '0' : '-1');
+                if (other === tr)
+                    other.setAttribute('aria-current', 'true');
+                else
+                    other.removeAttribute('aria-current');
+            }
+            this.emit('cube-select', { resource: context.resource, id, row });
+            if (id === null)
+                return;
+            let target = null;
+            try {
+                target = this.detailTarget();
+            }
+            catch (error) {
+                // Checked on load; an attribute changed since is reported the same way.
+                this.showState(stateFor(error));
+                return;
+            }
+            target?.setAttribute('record-id', String(id));
+        }
+        /** Starts the export, or cancels the running one. */
+        toggleExport() {
+            if (this.exporting !== null) {
+                this.exporting.abort();
+                this.exporting = null;
+                if (this.exportButton !== null)
+                    this.exportButton.textContent = NL.exportCsv;
+                if (this.exportStatus !== null)
+                    this.exportStatus.textContent = '';
+                return;
+            }
+            void this.runExport();
+        }
+        async runExport() {
+            const context = this.context;
+            const button = this.exportButton;
+            const status = this.exportStatus;
+            if (context === null || button === null || status === null)
+                return;
+            const controller = new AbortController();
+            this.exporting = controller;
+            const { signal } = controller;
+            button.textContent = NL.cancel;
+            status.textContent = NL.exporting(0);
+            const rows = [];
+            let message = '';
+            try {
+                let pages = 0;
+                const query = this.query(context, MAX_PAGE, 1);
+                for await (const page of context.session.resource(context.resource).pages(query, { signal })) {
+                    // The preview ignores the signal: stop here when the user cancelled meanwhile.
+                    if (signal.aborted)
+                        break;
+                    rows.push(...page.data);
+                    status.textContent = NL.exporting(rows.length);
+                    if (++pages >= EXPORT_PAGES)
+                        break;
+                }
+                if (!signal.aborted) {
+                    downloadCsv(doc, `${context.resource}-${isoDate(new Date())}.csv`, toCsv(context.columns, rows));
+                }
+            }
+            catch (error) {
+                if (!signal.aborted && error?.name !== 'AbortError') {
+                    message = NL.exportFailed;
+                }
+            }
+            finally {
+                // A cancelled run was reset when it was cancelled; a newer run owns the button by now.
+                if (this.exporting === controller) {
+                    this.exporting = null;
+                    button.textContent = NL.exportCsv;
+                    status.textContent = message;
+                }
+            }
+        }
+    }
+    return CubeTable;
+}
+let controlIds = 0;

package/dist/ui/blocks/top.d.ts

@@ -0,0 +1,4 @@
+import type { BlockClass } from '../block.js';
+import type { BlockScope } from '../define.js';
+/** `<cube-top>`: the groups of a resource ranked by one measure, with a bar each; sorted and cut in the browser. */
+export declare function topBlock(Base: BlockClass, scope: BlockScope): BlockClass;