ng-hub-ui-spreadsheet 22.0.0

package/fesm2022/ng-hub-ui-spreadsheet.mjs

@@ -0,0 +1,4598 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, InjectionToken, ViewContainerRef, afterNextRender, ElementRef, Injector, booleanAttribute, contentChildren, model, output, signal, computed, viewChild, effect, untracked, afterRenderEffect, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
+import { buildSpanMap, gridWindow, growWindowToSpans, clampGridRange, gridRangeBetween, coversRange, isCovered, spanAt, isWithinGridRange, gridCellTabIndex, moveGridFocus, resolveGridIntent, resolveGridEdge, anchorOf, gridRangeCells, TranslatePipe, HUB_TRANSLATION_PREFIX } from 'ng-hub-ui-utils';
+
+/**
+ * Reading a sheet back as plain data, keyed by column alias.
+ *
+ * The point of the aliases: the owner works with `{ price: 12, units: 3 }` instead of mapping a
+ * grid of coordinates back onto its own fields by position, which breaks the moment a column
+ * moves.
+ *
+ * These read the value a column reports, never the text it decides to display, so a cell showing
+ * «120 ud.» still yields the number 120.
+ */
+/** One row as plain data. */
+function spreadsheetRecord(row, columns) {
+    const record = {};
+    for (const column of columns) {
+        record[column.key] = column.cell(row).value;
+    }
+    return record;
+}
+/** Every row as plain data, in the order the sheet holds them. */
+function spreadsheetRecords(rows, columns) {
+    return rows.map((row) => spreadsheetRecord(row, columns));
+}
+/**
+ * The aliases declared more than once, each named a single time.
+ *
+ * A repeated alias is not a cosmetic problem: the later column silently overwrites the earlier
+ * one in every structured read, and once formulas arrive the reference becomes ambiguous. The
+ * sheet reports this rather than guessing which column was meant.
+ */
+function duplicateColumnKeys(columns) {
+    const seen = new Set();
+    const repeated = new Set();
+    for (const column of columns) {
+        if (seen.has(column.key)) {
+            repeated.add(column.key);
+        }
+        seen.add(column.key);
+    }
+    return [...repeated];
+}
+
+/**
+ * Delimited text, read and written.
+ *
+ * The clipboard speaks it with tabs and a CSV file with commas — or with semicolons, wherever the
+ * comma is already busy being a decimal mark. Everything else about them is the same, so they
+ * share this.
+ */
+/**
+ * Reads a table out of delimited text.
+ *
+ * One state machine for the clipboard and for CSV, because they are the same format with a
+ * different separator and the awkward parts are identical: a quoted cell holding the separator, a
+ * doubled quote standing for one, a line ending that may be one character or two, and a stray
+ * quote in the middle of a cell that is content rather than punctuation — `12" de pantalla`.
+ *
+ * @param input - The text to read.
+ * @param delimiter - What separates the cells of a row.
+ * @returns The rows, each as a list of cells, exactly as they were written.
+ */
+function parseDelimited(input, delimiter = '\t') {
+    if (input === '') {
+        return [];
+    }
+    const rows = [];
+    let row = [];
+    let cell = '';
+    let quoted = false;
+    let atCellStart = true;
+    for (let index = 0; index < input.length; index++) {
+        const char = input[index];
+        if (quoted) {
+            if (char === '"') {
+                if (input[index + 1] === '"') {
+                    cell += '"';
+                    index++;
+                }
+                else {
+                    quoted = false;
+                }
+            }
+            else {
+                cell += char;
+            }
+            continue;
+        }
+        if (char === '"' && atCellStart) {
+            quoted = true;
+            atCellStart = false;
+            continue;
+        }
+        atCellStart = false;
+        if (char === delimiter) {
+            row.push(cell);
+            cell = '';
+            atCellStart = true;
+            continue;
+        }
+        if (char === '\n' || char === '\r') {
+            // Swallow the LF of a CRLF so a Windows paste does not gain a blank row per line.
+            if (char === '\r' && input[index + 1] === '\n') {
+                index++;
+            }
+            row.push(cell);
+            rows.push(row);
+            row = [];
+            cell = '';
+            atCellStart = true;
+            continue;
+        }
+        cell += char;
+    }
+    // A trailing newline closed the last row already; anything left is a real final row.
+    if (cell !== '' || row.length) {
+        row.push(cell);
+        rows.push(row);
+    }
+    return rows;
+}
+/**
+ * Writes a table as delimited text.
+ *
+ * A cell is quoted only when it has to be: one that holds the separator, a quote, or a line
+ * ending. Quoting everything is also correct and is what many exporters do, but it makes a file
+ * that is unpleasant to read and twice the size for nothing.
+ *
+ * @param rows - The rows to write.
+ * @param delimiter - What to put between the cells.
+ * @param newline - What ends a line. CRLF is what a spreadsheet on Windows expects.
+ */
+function serialiseDelimited(rows, delimiter = '\t', newline = '\n') {
+    const needsQuotes = (cell) => cell.includes(delimiter) || cell.includes('"') || /[\r\n]/.test(cell);
+    return rows
+        .map((row) => row.map((cell) => (needsQuotes(cell) ? `"${cell.replace(/"/g, '""')}"` : cell)).join(delimiter))
+        .join(newline);
+}
+
+/**
+ * Reads a number out of text written in the reader's convention.
+ *
+ * Deliberately three-valued: a number, `null` for an empty cell — which is an absence and not a
+ * zero — and `undefined` for text that is not a number at all, so a caller can refuse a paste
+ * instead of silently writing NaN.
+ *
+ * @param text The text as typed or as pasted.
+ * @param decimalMark Which character separates the decimals for this reader.
+ */
+function parseDecimal(text, decimalMark) {
+    // Excel pads figures with non-breaking spaces, which trim() does not touch.
+    const trimmed = text.replace(/[\s ]/g, '');
+    if (trimmed === '') {
+        return null;
+    }
+    const thousands = decimalMark === ',' ? '.' : ',';
+    const bare = trimmed.split(thousands).join('').replace(/%$/, '').replace(decimalMark, '.');
+    if (!/^[+-]?(\d+\.?\d*|\.\d+)$/.test(bare)) {
+        return undefined;
+    }
+    const value = Number(bare);
+    return Number.isFinite(value) ? value : undefined;
+}
+/**
+ * Parses a pasted block into a table of cells.
+ *
+ * The plain text decides the shape, because it is the only flavour guaranteed to be there and to
+ * be complete. The HTML, when present and parseable, is read alongside it purely to recover raw
+ * numbers.
+ */
+function parseClipboardTable(payload) {
+    const rows = parseDelimited(payload.text ?? '');
+    if (!rows.length) {
+        return [];
+    }
+    const raw = payload.html ? rawValuesFromHtml(payload.html) : [];
+    return rows.map((row, rowIndex) => row.map((text, colIndex) => {
+        const value = raw[rowIndex]?.[colIndex];
+        return value === undefined ? { text } : { text, raw: value };
+    }));
+}
+/**
+ * Writes a block of values as both flavours.
+ *
+ * Numbers go into the plain text with a dot and no grouping, which every spreadsheet reads
+ * whatever its reader has configured, and into the HTML as `x:num`, which is what lets another
+ * instance of this component — or Excel — recover the exact value rather than re-parsing a
+ * formatted string.
+ */
+function serialiseClipboardTable(rows) {
+    const text = rows.map((row) => row.map(toDelimitedCell).join('\t')).join('\n');
+    const html = '<table>' + rows.map((row) => '<tr>' + row.map(toHtmlCell).join('') + '</tr>').join('') + '</table>';
+    return { text, html };
+}
+/** One cell as tab-separated text, quoted only when it would otherwise break the shape. */
+function toDelimitedCell(value) {
+    if (value === null) {
+        return '';
+    }
+    if (typeof value === 'number') {
+        return String(value);
+    }
+    return /[\t\n\r"]/.test(value) ? `"${value.split('"').join('""')}"` : value;
+}
+/** One cell as HTML, with the raw number attached when there is one. */
+function toHtmlCell(value) {
+    if (value === null) {
+        return '<td></td>';
+    }
+    if (typeof value === 'number') {
+        return `<td x:num="${value}">${value}</td>`;
+    }
+    return `<td>${escapeHtml(value)}</td>`;
+}
+function escapeHtml(value) {
+    return value.split('&').join('&amp;').split('<').join('&lt;').split('>').join('&gt;');
+}
+/**
+ * Splits tab-separated text into rows and cells, honouring quoting.
+ *
+ * A hand-rolled state machine rather than a pair of splits, because a cell may legitimately hold
+ * a tab or a newline when it is quoted, and splitting first destroys exactly that data. A stray
+ * quote in the middle of a cell — `12" de pantalla` — is content, not a delimiter, so quoting
+ * only counts at the start of a cell.
+ */
+/**
+ * Pulls the raw numbers out of the HTML flavour, laid out to match the table.
+ *
+ * Parsed with `DOMParser` and read through `textContent` and attributes. The clipboard is
+ * attacker-controlled input, so nothing here is ever assigned to `innerHTML`: pasting a crafted
+ * cell into a page is a direct route to running somebody else's script.
+ */
+function rawValuesFromHtml(html) {
+    if (typeof DOMParser === 'undefined') {
+        return [];
+    }
+    // Office prefixes the fragment with a byte-offset header that is not markup.
+    const markup = html.slice(Math.max(0, html.indexOf('<')));
+    const table = new DOMParser().parseFromString(markup, 'text/html').querySelector('table');
+    if (!table) {
+        return [];
+    }
+    return [...table.querySelectorAll('tr')].map((tr) => [...tr.querySelectorAll('td, th')].map((cell) => rawValueOf(cell)));
+}
+/** The declared number of one cell, from whichever dialect the source speaks. */
+function rawValueOf(cell) {
+    const excel = cell.getAttribute('x:num');
+    if (excel !== null && excel !== '') {
+        const value = Number(excel);
+        return Number.isFinite(value) ? value : undefined;
+    }
+    const sheets = cell.getAttribute('data-sheets-value');
+    if (sheets) {
+        try {
+            // Google encodes the type in key "1" and the number in key "3"; 3 means number.
+            const parsed = JSON.parse(sheets);
+            if (parsed['1'] === 3 && typeof parsed['3'] === 'number') {
+                return parsed['3'];
+            }
+        }
+        catch {
+            // A dialect this does not know. The displayed text still carries the cell.
+        }
+    }
+    return undefined;
+}
+
+/** Matches an alias this module allocated, capturing its number. */
+const GENERATED = /^(.+)-(\d+)$/;
+/**
+ * Whether a permission lets this particular subject through.
+ *
+ * Silence means no. A sheet that gains the ability to delete rows because an option was left out
+ * is a worse failure than one that refuses until told otherwise.
+ *
+ * A predicate that throws is treated as a refusal: the owner's guard is broken, and acting on a
+ * broken guard is how data gets deleted that should not have been.
+ */
+function isStructureAllowed(permission, subject, index) {
+    if (permission === undefined) {
+        return false;
+    }
+    if (typeof permission === 'boolean') {
+        return permission;
+    }
+    try {
+        return permission(subject, index);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Where an insertion actually lands.
+ *
+ * @param reference The row or column the reader pointed at.
+ * @param side Whether the new one goes before it or after it.
+ * @param length How many there are now.
+ * @returns An index between 0 and `length`, inclusive, since appending at the end is legal.
+ */
+function resolveInsertIndex(reference, side, length) {
+    const clamped = Math.max(0, Math.min(length, Math.trunc(reference)));
+    const index = side === 'after' ? clamped + 1 : clamped;
+    return Math.max(0, Math.min(length, index));
+}
+/**
+ * An alias for a new column that has never belonged to another one.
+ *
+ * Pass every alias the sheet has ever handed out, the live ones and the retired ones together.
+ * That is the whole point: an alias is an identity, so reusing a deleted column's name makes
+ * everything that referenced the old column silently resolve to the new one, and the mistake
+ * surfaces much later as wrong numbers rather than as an error.
+ *
+ * The same rule the project already applies to task codes, for the same reason.
+ *
+ * @param taken Every alias ever used, whether the column still exists or not.
+ * @param prefix The family to number within; `col` when not given.
+ */
+function nextColumnKey(taken, prefix = 'col') {
+    let highest = 0;
+    for (const key of taken) {
+        const match = GENERATED.exec(key);
+        if (match && match[1] === prefix) {
+            highest = Math.max(highest, Number(match[2]));
+        }
+    }
+    return `${prefix}-${highest + 1}`;
+}
+/**
+ * The references that no longer resolve to a column.
+ *
+ * Give it whatever points at columns — the keys of a saved-state map, the aliases a formula
+ * mentions — and it reports which of them have nothing behind them any more. Each one named
+ * once, in the order first seen, so a message to the reader lists them the way they were found.
+ */
+function danglingColumnKeys(referenced, columns) {
+    const live = new Set(columns.map((column) => column.key));
+    const broken = [];
+    const seen = new Set();
+    for (const key of referenced) {
+        if (!live.has(key) && !seen.has(key)) {
+            seen.add(key);
+            broken.push(key);
+        }
+    }
+    return broken;
+}
+
+/**
+ * Turning a stored value into what a cell shows, and turning what was typed back into a value.
+ *
+ * One place for both directions, because they have to agree: a cell that shows `On hold` must
+ * accept `On hold` back, or pasting a column onto itself loses data.
+ */
+/** Written forms of yes and no, in the languages the library ships labels for. */
+const AFFIRMATIVE = new Set(['1', 'true', 'yes', 'y', 'sí', 'si', 'oui', 'ja', 'да', 'はい', '是', 'نعم']);
+const NEGATIVE = new Set(['0', 'false', 'no', 'n', 'non', 'nein', 'нет', 'いいえ', '否', 'لا']);
+/** The option a stored value belongs to, or undefined when it belongs to none of them. */
+function optionFor(value, column) {
+    return column.options?.find((option) => option.value === value);
+}
+/**
+ * What the cell shows for a value.
+ *
+ * A `select` value whose option has been removed is shown as the stored value rather than as
+ * nothing: blanking it would read as data loss, and the reader would have no way to tell what the
+ * row used to say.
+ */
+function displayValue(value, column) {
+    if (value === null || value === '') {
+        return '';
+    }
+    switch (column.kind) {
+        case 'select':
+            return optionFor(value, column)?.label ?? String(value);
+        case 'boolean':
+            // A mark rather than the word: a column of them reads as a column, and it takes no
+            // width worth arguing about.
+            return isTruthy(value) ? '✓' : '';
+        default:
+            return String(value);
+    }
+}
+/**
+ * What a typed or pasted string is worth in a column.
+ *
+ * Three answers, as everywhere else here: the value, `null` for an empty cell, and `undefined`
+ * for something this column cannot hold — which lets the caller refuse rather than store rubbish.
+ */
+function parseForColumn(text, column, decimalMark) {
+    const trimmed = text.trim();
+    switch (column.kind) {
+        case 'number':
+        case 'currency':
+            return parseDecimal(text, decimalMark);
+        case 'select': {
+            if (trimmed === '') {
+                return null;
+            }
+            // The stored value first, then the label — a paste from a spreadsheet carries what was
+            // displayed, and a column pasted onto itself has to survive the round trip.
+            const byValue = column.options?.find((option) => String(option.value) === trimmed);
+            const byLabel = column.options?.find((option) => option.label === trimmed);
+            const match = byValue ?? byLabel;
+            // Nothing on the list means nothing this column may hold. Refusing is the whole point
+            // of declaring a closed list in the first place.
+            return match ? match.value : undefined;
+        }
+        case 'boolean': {
+            if (trimmed === '') {
+                return null;
+            }
+            const lowered = trimmed.toLowerCase();
+            if (AFFIRMATIVE.has(lowered)) {
+                return 1;
+            }
+            if (NEGATIVE.has(lowered)) {
+                return 0;
+            }
+            return undefined;
+        }
+        case 'date':
+            // Kept as the text it was written in. Turning it into a Date and back is what shifts a
+            // date by a day for anyone east or west of whoever wrote the code.
+            return trimmed === '' ? null : trimmed;
+        default:
+            return trimmed === '' ? null : text;
+    }
+}
+/** Whether a stored value counts as yes. */
+function isTruthy(value) {
+    if (typeof value === 'number') {
+        return value !== 0;
+    }
+    return typeof value === 'string' && AFFIRMATIVE.has(value.toLowerCase());
+}
+
+/**
+ * Replaces the editor of one column with a template of your own.
+ *
+ * The sheet ships editors for the kinds it knows — a field for text and figures, a list for a
+ * column with options, a date field, a checkbox — and this is how a column gets something else:
+ * a `hub-select` with a search box, a picker of your own, anything that can report a value.
+ *
+ * ```html
+ * <hub-spreadsheet [rows]="rows()" [columns]="columns" [rowKey]="rowKey">
+ *   <ng-template hubSpreadsheetEditor="supplier" let-value let-ctx="commit">
+ *     <hub-select [options]="suppliers()" [ngModel]="value" (ngModelChange)="ctx($event)" />
+ *   </ng-template>
+ * </hub-spreadsheet>
+ * ```
+ *
+ * The template is responsible for calling `commit` or `cancel`. Until it does, the editor stays
+ * open — which is what lets a picker take as many clicks as it needs without the sheet deciding
+ * the reader has finished.
+ */
+class HubSpreadsheetEditorDirective {
+    /** The alias of the column this editor belongs to. */
+    column = input.required({ ...(ngDevMode ? { debugName: "column" } : /* istanbul ignore next */ {}), alias: 'hubSpreadsheetEditor' });
+    /**
+     * The same rows the sheet is given, only so the compiler knows what a row is here.
+     *
+     * Nothing reads it. A template is compiled on its own, with no way of knowing which sheet will
+     * mount it, so `let-row` arrives as `unknown` and every use of it needs a cast. Handing the
+     * rows over is how Angular's own structural directives solve this, and it costs one binding.
+     */
+    rows = input([], { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), alias: 'hubSpreadsheetEditorRows' });
+    template = inject(TemplateRef);
+    /** Lets Angular narrow `let-` bindings inside the template to the real context type. */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubSpreadsheetEditorDirective, isStandalone: true, selector: "[hubSpreadsheetEditor]", inputs: { column: { classPropertyName: "column", publicName: "hubSpreadsheetEditor", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "hubSpreadsheetEditorRows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubSpreadsheetEditor]',
+                    standalone: true
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetEditor", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetEditorRows", required: false }] }] } });
+
+/**
+ * Draws one column's cells yourself: a badge for a state, an avatar beside a name, a row of
+ * actions.
+ *
+ * The sibling of `hubSpreadsheetEditor`, for the other half of a cell's life. That one replaces
+ * what appears when the cell is opened; this one replaces what the cell shows while it is not.
+ *
+ * ```html
+ * <hub-spreadsheet [rows]="rows()" [columns]="columns" [rowKey]="rowKey">
+ *   <ng-template hubSpreadsheetCell="status" let-value>
+ *     <hub-badge [variant]="value === 'done' ? 'success' : 'warning'">{{ value }}</hub-badge>
+ *   </ng-template>
+ * </hub-spreadsheet>
+ * ```
+ *
+ * Two things stay the sheet's whatever the template draws. The clipboard carries the cell's value,
+ * not its decoration, so a copy round-trips as data rather than as a picture of it. And the cell
+ * is still the thing the keyboard is on: the template is drawn inside it, not instead of it.
+ *
+ * A template with something clickable in it joins the tab order of the page, which the grid's own
+ * roving tab stop does not manage — put the action behind `hubSpreadsheetEditor` instead when the
+ * cell should be entered before it can be used.
+ */
+class HubSpreadsheetCellDirective {
+    /** The alias of the column these cells belong to. */
+    column = input.required({ ...(ngDevMode ? { debugName: "column" } : /* istanbul ignore next */ {}), alias: 'hubSpreadsheetCell' });
+    /**
+     * The same rows the sheet is given, only so the compiler knows what a row is here.
+     *
+     * Nothing reads it. A template is compiled on its own, with no way of knowing which sheet will
+     * mount it, so `let-row` arrives as `unknown` and every use of it needs a cast. Handing the
+     * rows over is how Angular's own structural directives solve this, and it costs one binding:
+     *
+     * ```html
+     * <ng-template hubSpreadsheetCell="actions" [hubSpreadsheetCellRows]="orders()" let-row="row">
+     * ```
+     */
+    rows = input([], { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), alias: 'hubSpreadsheetCellRows' });
+    template = inject(TemplateRef);
+    /** Lets Angular narrow `let-` bindings inside the template to the real context type. */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubSpreadsheetCellDirective, isStandalone: true, selector: "[hubSpreadsheetCell]", inputs: { column: { classPropertyName: "column", publicName: "hubSpreadsheetCell", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "hubSpreadsheetCellRows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubSpreadsheetCell]',
+                    standalone: true
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetCell", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetCellRows", required: false }] }] } });
+
+/**
+ * Resizing and reordering columns, as arithmetic on their own.
+ *
+ * Kept apart from the component so the fiddly parts — a floor that a drag cannot go under, an
+ * index that shifts as a column leaves its old place — are settled by tests rather than by
+ * pulling at a header and hoping.
+ */
+/**
+ * The width a drag arrives at, or null when there is no honest answer.
+ *
+ * Null rather than a guess: if the starting width could not be measured — missing, or zero
+ * because nothing had been laid out yet — any number this returns
+ * is invented, and an invented width either collapses the column to its floor or makes it jump.
+ * Saying so lets the caller leave the column exactly as it is, which is what the reader expects
+ * from a drag that could not be interpreted.
+ *
+ * @param start The width the column had when the drag began.
+ * @param delta How far the pointer has travelled since.
+ * @param min The narrowest the column may become.
+ * @returns A whole number of pixels never below `min`, or null when the drag cannot be read.
+ */
+function resolveColumnWidth(start, delta, min) {
+    // Zero counts as unmeasurable, not as a width: no column is nought pixels wide, so a zero
+    // means the element had not been laid out when the drag began. Accepting it would make the
+    // column jump to wherever the pointer happened to be.
+    if (!Number.isFinite(start) || start <= 0) {
+        return null;
+    }
+    const travelled = Number.isFinite(delta) ? delta : 0;
+    // Whole pixels: half a pixel of column leaves a hairline of the one behind showing through.
+    return Math.max(min, Math.round(start + travelled));
+}
+/**
+ * A list with one item moved to another position.
+ *
+ * `to` is read against the list as it stands before the move, which is what a reader means when
+ * they drop a column "here". Taking the item out first would shift every later index by one and
+ * make a rightward move land one place short — the off-by-one every reorder implementation meets
+ * exactly once.
+ *
+ * @returns A new array; the one passed in is left alone.
+ */
+function moveColumn(items, from, to) {
+    const next = [...items];
+    if (from < 0 || from >= next.length) {
+        return next;
+    }
+    const target = Math.max(0, Math.min(next.length - 1, to));
+    if (target === from) {
+        return next;
+    }
+    const [moved] = next.splice(from, 1);
+    next.splice(target, 0, moved);
+    return next;
+}
+
+/** Text ending in digits: `INV-007`, `Week 3`. The trailing digits are what gets counted. */
+const TRAILING_NUMBER = /^(.*?)(\d+)(\D*)$/;
+/**
+ * Reads a source run and says how to continue it.
+ *
+ * A single value still counts as a run: dragging one number down produces 1, 2, 3, which is what
+ * every spreadsheet does and what people expect.
+ */
+function detectSeries(values) {
+    const repeat = { kind: 'repeat', values };
+    if (!values.length || values.some((value) => value === null || value === '')) {
+        return repeat;
+    }
+    if (values.every((value) => typeof value === 'number')) {
+        const numbers = values;
+        const step = numbers.length === 1 ? 1 : numbers[1] - numbers[0];
+        // Every gap has to match, or it is not a run the reader meant.
+        for (let index = 2; index < numbers.length; index++) {
+            if (round(numbers[index] - numbers[index - 1]) !== round(step)) {
+                return repeat;
+            }
+        }
+        return { kind: 'number', start: numbers[numbers.length - 1], step: round(step) };
+    }
+    if (values.every((value) => typeof value === 'string')) {
+        return textSeries(values) ?? repeat;
+    }
+    return repeat;
+}
+/**
+ * The values a drag of `count` cells should write.
+ *
+ * @param source What the reader had selected when they took the handle.
+ * @param count How many cells the drag covers.
+ */
+function fillValues(source, count) {
+    if (count <= 0) {
+        return [];
+    }
+    if (!source.length) {
+        return Array.from({ length: count }, () => null);
+    }
+    const series = detectSeries(source);
+    const out = [];
+    for (let index = 0; index < count; index++) {
+        switch (series.kind) {
+            case 'number':
+                out.push(round(series.start + series.step * (index + 1)));
+                break;
+            case 'text-number': {
+                const next = series.start + series.step * (index + 1);
+                out.push(`${series.prefix}${String(Math.abs(next)).padStart(series.pad, '0')}${series.suffix}`);
+                break;
+            }
+            case 'repeat':
+                out.push(series.values[index % series.values.length] ?? null);
+                break;
+        }
+    }
+    return out;
+}
+/** A run of text ending in numbers, or null when the pieces do not line up. */
+function textSeries(values) {
+    const parts = values.map((value) => TRAILING_NUMBER.exec(value));
+    if (parts.some((part) => !part)) {
+        return null;
+    }
+    const matches = parts;
+    const prefix = matches[0][1];
+    const suffix = matches[0][3];
+    // Only a run that shares its wording is a run. `INV-1` and `REC-2` are two names, not a series.
+    if (matches.some((match) => match[1] !== prefix || match[3] !== suffix)) {
+        return null;
+    }
+    const numbers = matches.map((match) => Number(match[2]));
+    const step = numbers.length === 1 ? 1 : numbers[1] - numbers[0];
+    for (let index = 2; index < numbers.length; index++) {
+        if (numbers[index] - numbers[index - 1] !== step) {
+            return null;
+        }
+    }
+    return {
+        kind: 'text-number',
+        prefix,
+        suffix,
+        start: numbers[numbers.length - 1],
+        step,
+        // The written width is kept, so a run of INV-008 does not become INV-10.
+        pad: matches[0][2].length
+    };
+}
+/**
+ * Rounds away the drift of adding decimals repeatedly.
+ *
+ * `0.1 + 0.1 + 0.1` is not `0.3` in binary floating point, and a column of prices that reads
+ * `0.30000000000000004` is a bug report waiting to happen.
+ */
+function round(value) {
+    return Number(value.toFixed(10));
+}
+
+/**
+ * Working out where frozen rows and columns sit.
+ *
+ * `position: sticky` pins an element at a distance from the edge, but it cannot work that
+ * distance out for itself: the second frozen column has to sit exactly as far in as the first
+ * one is wide, and CSS has no way to add up its siblings. So the widths are measured once after
+ * a render and turned into offsets here.
+ */
+/**
+ * The distance from the leading edge for each of the first `count` tracks.
+ *
+ * @param sizes The measured width or height of every track, in order.
+ * @param count How many of them are frozen.
+ * @returns One offset per frozen track; the first is always zero.
+ */
+function frozenOffsets(sizes, count) {
+    const frozen = Math.max(0, Math.min(Math.trunc(count) || 0, sizes.length));
+    const offsets = [];
+    let running = 0;
+    for (let index = 0; index < frozen; index++) {
+        offsets.push(running);
+        const size = sizes[index];
+        // A track that could not be measured contributes nothing rather than turning every
+        // offset after it into NaN, which would unpin the whole pane.
+        running += Number.isFinite(size) ? Math.round(size) : 0;
+    }
+    return offsets;
+}
+/**
+ * Whether a track is the last frozen one.
+ *
+ * That one carries the divider: a frozen pane needs a visible seam, or content scrolling
+ * underneath it reads as content that belongs to it.
+ */
+function isFrozenEdge(index, count) {
+    return count > 0 && index === count - 1;
+}
+
+/**
+ * Opens the list of a native select, or the calendar of a date field, as its cell opens.
+ *
+ * Without it the reader clicks a cell, gets an editor, and has to click a second time to see what
+ * the column allows — two gestures for one decision.
+ *
+ * `showPicker` needs the click that opened the cell still to count as a gesture, and it is recent
+ * enough that some browsers do not have it. Either way a refusal leaves the editor focused and the
+ * list closed, which is where it stood before, so nothing has to be undone.
+ *
+ * Only for a list and a date. On a text field the same method opens the browser's own autofill
+ * suggestions, which is not what the cell asked for.
+ *
+ * @returns whether the picker was asked to open.
+ */
+function revealPicker(element) {
+    const picker = element;
+    if (typeof picker?.showPicker !== 'function') {
+        return false;
+    }
+    try {
+        picker.showPicker();
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+
+/**
+ * Running a parsed formula against the sheet around it.
+ *
+ * The rules are a spreadsheet's rather than a programming language's, which is what a reader
+ * expects: an empty cell is nought in arithmetic and an empty string in text, `TRUE` is one, and
+ * dividing by nought is an error rather than infinity.
+ */
+/** Whether what came back is a failure. */
+function failed$1(value) {
+    return (typeof value === 'object' && value !== null && 'ok' in value && value.ok === false);
+}
+/**
+ * A value as a number.
+ *
+ * An empty cell counts as nought, as it does in a spreadsheet — a column of figures with gaps adds
+ * up rather than refusing. Text that is not a number is an error and not a silent nought: `"abc" *
+ * 2` is a mistake worth seeing.
+ */
+function asNumber(value) {
+    if (value === null || value === '') {
+        return 0;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : { ok: false, code: 'type' };
+    }
+    if (typeof value === 'boolean') {
+        return value ? 1 : 0;
+    }
+    const parsed = Number(String(value).replace(',', '.'));
+    return Number.isFinite(parsed) ? parsed : { ok: false, code: 'type', at: String(value) };
+}
+/** A value as text, where an empty cell is an empty string rather than the word "null". */
+function asText(value) {
+    if (value === null) {
+        return '';
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'TRUE' : 'FALSE';
+    }
+    return String(value);
+}
+/** Whether a value counts as yes. */
+function asBoolean(value) {
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return value !== 0;
+    }
+    return value !== null && value !== '' && value.toUpperCase() !== 'FALSE';
+}
+/** Every number in a list of values and lists, with the empties left out. */
+function numbersOf(values) {
+    const numbers = [];
+    for (const value of values) {
+        if (Array.isArray(value)) {
+            const nested = numbersOf(value);
+            if (failed$1(nested)) {
+                return nested;
+            }
+            numbers.push(...nested);
+            continue;
+        }
+        const single = value;
+        // A gap in a column is not a nought to average against: SUM of three figures and two
+        // blanks is the sum of three figures, and AVERAGE of them divides by three.
+        if (single === null || single === '') {
+            continue;
+        }
+        const number = asNumber(single);
+        if (failed$1(number)) {
+            return number;
+        }
+        numbers.push(number);
+    }
+    return numbers;
+}
+/**
+ * Runs a formula.
+ *
+ * @param formula - What {@link parseFormula} gave back.
+ * @param context - How to reach the sheet: this row's cells, and whole columns.
+ * @returns The value, or what went wrong.
+ */
+function evaluateFormula(formula, context) {
+    function walk(node) {
+        switch (node.kind) {
+            case 'number':
+            case 'text':
+            case 'boolean':
+                return node.value;
+            case 'cell': {
+                const value = context.cell(node.alias);
+                // Undefined is "no such column", which is a mistake; null is an empty cell, which
+                // is not. Collapsing the two is how a typo in an alias comes out as nought.
+                return value === undefined ? { ok: false, code: 'name', at: node.alias } : value;
+            }
+            case 'column': {
+                const values = context.column(node.alias);
+                return values === undefined ? { ok: false, code: 'name', at: node.alias } : values;
+            }
+            case 'at': {
+                const value = context.at?.(node.row, node.col);
+                // A place outside the sheet is a mistake, not an empty cell: a formula that points
+                // off the edge should say so rather than quietly read nothing.
+                return value === undefined ? { ok: false, code: 'name', at: 'ref' } : value;
+            }
+            case 'area': {
+                const values = context.area?.(node.top, node.left, node.bottom, node.right);
+                return values === undefined ? { ok: false, code: 'name', at: 'ref' } : values;
+            }
+            case 'unary': {
+                const operand = walk(node.operand);
+                if (failed$1(operand)) {
+                    return operand;
+                }
+                const number = asNumber(operand);
+                if (failed$1(number)) {
+                    return number;
+                }
+                return node.operator === '-' ? -number : number;
+            }
+            case 'binary':
+                return binary(node);
+            case 'call':
+                return call(node);
+        }
+    }
+    function binary(node) {
+        const left = walk(node.left);
+        if (failed$1(left)) {
+            return left;
+        }
+        const right = walk(node.right);
+        if (failed$1(right)) {
+            return right;
+        }
+        const a = left;
+        const b = right;
+        if (node.operator === '&') {
+            return asText(a) + asText(b);
+        }
+        if (['=', '<>', '<', '<=', '>', '>='].includes(node.operator)) {
+            return compare(node.operator, a, b);
+        }
+        const x = asNumber(a);
+        if (failed$1(x)) {
+            return x;
+        }
+        const y = asNumber(b);
+        if (failed$1(y)) {
+            return y;
+        }
+        switch (node.operator) {
+            case '+':
+                return x + y;
+            case '-':
+                return x - y;
+            case '*':
+                return x * y;
+            case '/':
+                return y === 0 ? { ok: false, code: 'divide-by-zero' } : x / y;
+            case '^':
+                return x ** y;
+        }
+        return { ok: false, code: 'syntax', at: node.operator };
+    }
+    /** Two values compared the way a reader means it: numbers as numbers, text as text. */
+    function compare(operator, a, b) {
+        const bothNumbers = typeof a !== 'string' && typeof b !== 'string';
+        const x = bothNumbers ? asNumber(a) : asText(a);
+        const y = bothNumbers ? asNumber(b) : asText(b);
+        switch (operator) {
+            case '=':
+                return x === y;
+            case '<>':
+                return x !== y;
+            case '<':
+                return x < y;
+            case '<=':
+                return x <= y;
+            case '>':
+                return x > y;
+            default:
+                return x >= y;
+        }
+    }
+    function call(node) {
+        const args = [];
+        // IF decides which branch to run, so its arguments are not all worked out up front: a
+        // division by nought on the branch that is not taken is not an error the reader made.
+        if (node.name === 'IF') {
+            if (node.args.length < 2 || node.args.length > 3) {
+                return { ok: false, code: 'type', at: 'IF' };
+            }
+            const condition = walk(node.args[0]);
+            if (failed$1(condition)) {
+                return condition;
+            }
+            if (asBoolean(condition)) {
+                return walk(node.args[1]);
+            }
+            return node.args[2] ? walk(node.args[2]) : false;
+        }
+        for (const argument of node.args) {
+            const value = walk(argument);
+            if (failed$1(value)) {
+                return value;
+            }
+            args.push(value);
+        }
+        return apply(node.name, args);
+    }
+    function apply(name, args) {
+        switch (name) {
+            case 'SUM':
+            case 'AVERAGE':
+            case 'AVG':
+            case 'MIN':
+            case 'MAX': {
+                const numbers = numbersOf(args);
+                if (failed$1(numbers)) {
+                    return numbers;
+                }
+                if (name === 'SUM') {
+                    return numbers.reduce((total, value) => total + value, 0);
+                }
+                if (!numbers.length) {
+                    // Nothing to average, and nothing to take the least or the most of.
+                    return name === 'MIN' || name === 'MAX' ? 0 : { ok: false, code: 'divide-by-zero' };
+                }
+                if (name === 'MIN') {
+                    return Math.min(...numbers);
+                }
+                if (name === 'MAX') {
+                    return Math.max(...numbers);
+                }
+                return numbers.reduce((total, value) => total + value, 0) / numbers.length;
+            }
+            case 'COUNT': {
+                const numbers = numbersOf(args);
+                return failed$1(numbers) ? 0 : numbers.length;
+            }
+            case 'ROUND': {
+                const value = asNumber(args[0]);
+                if (failed$1(value)) {
+                    return value;
+                }
+                const places = args.length > 1 ? asNumber(args[1]) : 0;
+                if (failed$1(places)) {
+                    return places;
+                }
+                const factor = 10 ** places;
+                return Math.round(value * factor) / factor;
+            }
+            case 'ABS': {
+                const value = asNumber(args[0]);
+                return failed$1(value) ? value : Math.abs(value);
+            }
+            case 'AND':
+                return args.every((value) => asBoolean(value));
+            case 'OR':
+                return args.some((value) => asBoolean(value));
+            case 'NOT':
+                return !asBoolean(args[0]);
+            case 'CONCAT':
+                return args.map((value) => asText(value)).join('');
+            case 'LEN':
+                return asText(args[0]).length;
+            default:
+                return { ok: false, code: 'name', at: name };
+        }
+    }
+    const result = walk(formula.node);
+    if (failed$1(result)) {
+        return result;
+    }
+    // A whole column where a single value was wanted: SUM() takes one, but a cell cannot show one.
+    if (Array.isArray(result)) {
+        return { ok: false, code: 'type' };
+    }
+    return { ok: true, value: result };
+}
+
+/**
+ * Coordinates: the other way to point at a cell, and what has to happen to them afterwards.
+ *
+ * An alias says which column it means and goes on meaning it whatever happens to the sheet. A
+ * coordinate says *where* the column was when the formula was written, which is only the same
+ * thing until somebody moves it. That is not a reason to refuse coordinates — a spreadsheet
+ * without `B2` is not a spreadsheet — it is a reason to move them with the sheet, which is what
+ * every spreadsheet does and what these functions are for.
+ */
+/** The letters a column is known by: A, B … Z, AA, AB … */
+function columnLabel(index) {
+    if (index < 0) {
+        return '';
+    }
+    let label = '';
+    let rest = index;
+    for (;;) {
+        label = String.fromCharCode(65 + (rest % 26)) + label;
+        rest = Math.floor(rest / 26) - 1;
+        if (rest < 0) {
+            return label;
+        }
+    }
+}
+/** Which column a run of letters means, or -1 when it means none. */
+function columnIndexOf(label) {
+    if (!/^[A-Za-z]+$/.test(label)) {
+        return -1;
+    }
+    let index = 0;
+    for (const character of label.toUpperCase()) {
+        index = index * 26 + (character.charCodeAt(0) - 64);
+    }
+    return index - 1;
+}
+/** Reads `B3` as a place, or nothing when it is not one. */
+function parseCoordinate(text) {
+    const match = /^([A-Za-z]+)([0-9]+)$/.exec(text);
+    if (!match) {
+        return null;
+    }
+    const col = columnIndexOf(match[1]);
+    const row = Number(match[2]) - 1;
+    return col < 0 || row < 0 ? null : { row, col };
+}
+/** Writes a place back as `B3`, which is what a formula shows. */
+function formatCoordinate(coordinate) {
+    return `${columnLabel(coordinate.col)}${coordinate.row + 1}`;
+}
+/** What a column moving does to a column index. */
+function afterColumnMove(col, from, to) {
+    if (col === from) {
+        return to;
+    }
+    // Everything between the two places shuffles by one, in whichever direction the column went.
+    if (from < to) {
+        return col > from && col <= to ? col - 1 : col;
+    }
+    return col >= to && col < from ? col + 1 : col;
+}
+/** What inserting or deleting tracks does to an index along that axis. */
+function afterInsertOrDelete(index, at, count) {
+    if (count > 0) {
+        return index >= at ? index + count : index;
+    }
+    const removed = -count;
+    if (index >= at && index < at + removed) {
+        return 'gone';
+    }
+    return index >= at + removed ? index - removed : index;
+}
+/** Where a coordinate ends up after a change, or that it no longer points at anything. */
+function moveCoordinate(coordinate, change) {
+    if (change.kind === 'move-column') {
+        return { row: coordinate.row, col: afterColumnMove(coordinate.col, change.from, change.to) };
+    }
+    if (change.kind === 'columns') {
+        const col = afterInsertOrDelete(coordinate.col, change.at, change.count);
+        return col === 'gone' ? 'gone' : { row: coordinate.row, col };
+    }
+    const row = afterInsertOrDelete(coordinate.row, change.at, change.count);
+    return row === 'gone' ? 'gone' : { row, col: coordinate.col };
+}
+/**
+ * Rewrites the coordinates in a formula so they point at the same data as before.
+ *
+ * Text, not a parsed tree, and deliberately: what a reader typed is what is stored, so what comes
+ * back has to be something they would recognise as their own formula with a letter changed. A
+ * reference to something that has been deleted becomes `#REF!`, which is what a spreadsheet does
+ * and is honest — the alternative is a formula that quietly reads its neighbour.
+ *
+ * @param formula - The text of the formula, `=` and all.
+ * @param change - What happened to the sheet.
+ * @returns The formula with its coordinates moved.
+ */
+function rewriteCoordinates(formula, change) {
+    if (typeof formula !== 'string' || !formula.trimStart().startsWith('=')) {
+        return formula;
+    }
+    // Left alone inside quotes and inside brackets: `"A1"` is a word somebody wrote, and `[price]`
+    // is an alias that happens to look like letters.
+    let result = '';
+    let index = 0;
+    let quoted = false;
+    let bracketed = false;
+    while (index < formula.length) {
+        const character = formula[index];
+        if (quoted) {
+            result += character;
+            quoted = character !== '"' || formula[index + 1] === '"';
+            index++;
+            continue;
+        }
+        if (character === '"') {
+            quoted = true;
+            result += character;
+            index++;
+            continue;
+        }
+        if (character === '[') {
+            bracketed = true;
+        }
+        if (character === ']') {
+            bracketed = false;
+        }
+        if (!bracketed) {
+            const match = /^[A-Za-z]+[0-9]+/.exec(formula.slice(index));
+            const coordinate = match && parseCoordinate(match[0]);
+            if (coordinate) {
+                const moved = moveCoordinate(coordinate, change);
+                result += moved === 'gone' ? '#REF!' : formatCoordinate(moved);
+                index += match[0].length;
+                continue;
+            }
+        }
+        result += character;
+        index++;
+    }
+    return result;
+}
+/**
+ * The rows again, with every formula in them moved to match the sheet's new shape.
+ *
+ * The sheet reports what the reader asked for and writes nothing, as it does with everything else,
+ * so this is the line the host writes in its own handler:
+ *
+ * ```ts
+ * protected onColumnMoved(move: { from: number; to: number; keys: string[] }): void {
+ *   this.order.set(move.keys);
+ *   this.rows.update((rows) => rewriteRowFormulas(rows, { kind: 'move-column', from: move.from, to: move.to }));
+ * }
+ * ```
+ *
+ * Every own property that holds a formula is rewritten, which covers the usual case of formulas
+ * living in the row's own fields. A host that keeps them somewhere else — a map beside the data, a
+ * column that declares its own — walks that itself with {@link rewriteCoordinates}.
+ *
+ * @param rows - The rows as they are.
+ * @param change - What happened to the sheet.
+ * @returns New rows; the ones with nothing to rewrite are the very same objects, so a sheet that
+ *          tracks by identity redraws only what moved.
+ */
+function rewriteRowFormulas(rows, change) {
+    return rows.map((row) => {
+        let changed = false;
+        const next = { ...row };
+        for (const [key, value] of Object.entries(next)) {
+            if (typeof value !== 'string') {
+                continue;
+            }
+            const rewritten = rewriteCoordinates(value, change);
+            if (rewritten !== value) {
+                next[key] = rewritten;
+                changed = true;
+            }
+        }
+        return (changed ? next : row);
+    });
+}
+
+/**
+ * Turning the text of a formula into something that can be run.
+ *
+ * Hand-written rather than generated, and deliberately: a grammar this small is a page of code,
+ * and a parser generator would be a dependency, a build step and a licence to check for the sake
+ * of it. What it costs is that the precedence is written out by hand — which is also what makes it
+ * readable.
+ *
+ * Precedence, loosest first, as in a spreadsheet:
+ *
+ *     comparison   =  <>  <  <=  >  >=
+ *     concatenation &
+ *     additive     +  -
+ *     multiplicative *  /
+ *     power        ^
+ *     unary        -  +
+ *     primary      number, text, TRUE/FALSE, [alias], [alias:], NAME(…), ( … )
+ */
+/** Whether a stored value is a formula rather than a value. */
+function isFormula(value) {
+    return typeof value === 'string' && value.trimStart().startsWith('=');
+}
+const SYMBOLS = ['<>', '<=', '>=', '+', '-', '*', '/', '^', '&', '=', '<', '>', '(', ')', ',', ';', ':'];
+/** Splits the text into the pieces the parser walks, or says where it gave up. */
+function tokenise(source) {
+    const tokens = [];
+    let index = 0;
+    while (index < source.length) {
+        const char = source[index];
+        if (/\s/.test(char)) {
+            index++;
+            continue;
+        }
+        // A reference: [alias] for this row, [alias:] for the whole column.
+        if (char === '[') {
+            const end = source.indexOf(']', index);
+            if (end < 0) {
+                return { ok: false, code: 'syntax', at: '[' };
+            }
+            const inside = source.slice(index + 1, end);
+            const whole = inside.endsWith(':');
+            const alias = (whole ? inside.slice(0, -1) : inside).trim();
+            if (!alias) {
+                return { ok: false, code: 'syntax', at: '[]' };
+            }
+            tokens.push({ kind: 'reference', alias, whole });
+            index = end + 1;
+            continue;
+        }
+        // A quoted string. Two quotes in a row are one quote, as in a spreadsheet.
+        if (char === '"') {
+            let text = '';
+            index++;
+            for (;;) {
+                if (index >= source.length) {
+                    return { ok: false, code: 'syntax', at: '"' };
+                }
+                if (source[index] === '"') {
+                    if (source[index + 1] === '"') {
+                        text += '"';
+                        index += 2;
+                        continue;
+                    }
+                    index++;
+                    break;
+                }
+                text += source[index];
+                index++;
+            }
+            tokens.push({ kind: 'text', value: text });
+            continue;
+        }
+        if (/[0-9.]/.test(char)) {
+            const match = /^[0-9]*\.?[0-9]+(?:[eE][+-]?[0-9]+)?/.exec(source.slice(index));
+            if (!match) {
+                return { ok: false, code: 'syntax', at: char };
+            }
+            tokens.push({ kind: 'number', value: Number(match[0]) });
+            index += match[0].length;
+            continue;
+        }
+        if (/[A-Za-z_]/.test(char)) {
+            const match = /^[A-Za-z_][A-Za-z0-9_.]*/.exec(source.slice(index));
+            tokens.push({ kind: 'name', value: match[0] });
+            index += match[0].length;
+            continue;
+        }
+        const symbol = SYMBOLS.find((candidate) => source.startsWith(candidate, index));
+        if (!symbol) {
+            return { ok: false, code: 'syntax', at: char };
+        }
+        tokens.push({ kind: 'symbol', value: symbol });
+        index += symbol.length;
+    }
+    return tokens;
+}
+/** Whether what came back is a failure rather than what was asked for. */
+function failed(value) {
+    return typeof value === 'object' && value !== null && 'ok' in value && value.ok === false;
+}
+/**
+ * Reads the text of a formula, with or without its leading `=`.
+ *
+ * @returns The parsed formula, or the first thing that did not make sense.
+ */
+function parseFormula(source) {
+    const text = source.trimStart().startsWith('=') ? source.trimStart().slice(1) : source;
+    const tokens = tokenise(text);
+    if (failed(tokens)) {
+        return tokens;
+    }
+    let at = 0;
+    const peek = () => tokens[at];
+    const eat = (value) => {
+        const token = peek();
+        if (token?.kind === 'symbol' && token.value === value) {
+            at++;
+            return true;
+        }
+        return false;
+    };
+    const cells = new Set();
+    const columns = new Set();
+    let coordinates = false;
+    function parseExpression() {
+        return parseComparison();
+    }
+    function parseComparison() {
+        let left = parseConcat();
+        if (failed(left)) {
+            return left;
+        }
+        for (;;) {
+            const token = peek();
+            const operator = token?.kind === 'symbol' ? token.value : '';
+            if (!['=', '<>', '<', '<=', '>', '>='].includes(operator)) {
+                return left;
+            }
+            at++;
+            const right = parseConcat();
+            if (failed(right)) {
+                return right;
+            }
+            left = { kind: 'binary', operator: operator, left, right };
+        }
+    }
+    function parseConcat() {
+        let left = parseAdditive();
+        if (failed(left)) {
+            return left;
+        }
+        while (eat('&')) {
+            const right = parseAdditive();
+            if (failed(right)) {
+                return right;
+            }
+            left = { kind: 'binary', operator: '&', left, right };
+        }
+        return left;
+    }
+    function parseAdditive() {
+        let left = parseMultiplicative();
+        if (failed(left)) {
+            return left;
+        }
+        for (;;) {
+            const token = peek();
+            const operator = token?.kind === 'symbol' ? token.value : '';
+            if (operator !== '+' && operator !== '-') {
+                return left;
+            }
+            at++;
+            const right = parseMultiplicative();
+            if (failed(right)) {
+                return right;
+            }
+            left = { kind: 'binary', operator, left, right };
+        }
+    }
+    function parseMultiplicative() {
+        let left = parsePower();
+        if (failed(left)) {
+            return left;
+        }
+        for (;;) {
+            const token = peek();
+            const operator = token?.kind === 'symbol' ? token.value : '';
+            if (operator !== '*' && operator !== '/') {
+                return left;
+            }
+            at++;
+            const right = parsePower();
+            if (failed(right)) {
+                return right;
+            }
+            left = { kind: 'binary', operator, left, right };
+        }
+    }
+    function parsePower() {
+        const left = parseUnary();
+        if (failed(left)) {
+            return left;
+        }
+        if (!eat('^')) {
+            return left;
+        }
+        // Right to left, as everywhere else: 2^3^2 is 2^(3^2).
+        const right = parsePower();
+        if (failed(right)) {
+            return right;
+        }
+        return { kind: 'binary', operator: '^', left, right };
+    }
+    function parseUnary() {
+        const token = peek();
+        if (token?.kind === 'symbol' && (token.value === '-' || token.value === '+')) {
+            at++;
+            const operand = parseUnary();
+            if (failed(operand)) {
+                return operand;
+            }
+            return { kind: 'unary', operator: token.value, operand };
+        }
+        return parsePrimary();
+    }
+    function parsePrimary() {
+        const token = peek();
+        if (!token) {
+            return { ok: false, code: 'syntax', at: 'end' };
+        }
+        if (token.kind === 'number') {
+            at++;
+            return { kind: 'number', value: token.value };
+        }
+        if (token.kind === 'text') {
+            at++;
+            return { kind: 'text', value: token.value };
+        }
+        if (token.kind === 'reference') {
+            at++;
+            if (token.whole) {
+                columns.add(token.alias);
+                return { kind: 'column', alias: token.alias };
+            }
+            cells.add(token.alias);
+            return { kind: 'cell', alias: token.alias };
+        }
+        if (token.kind === 'name') {
+            at++;
+            const upper = token.value.toUpperCase();
+            if (upper === 'TRUE' || upper === 'FALSE') {
+                return { kind: 'boolean', value: upper === 'TRUE' };
+            }
+            // A place: `B3`, or `B3:D7` for a rectangle of them. Written the way a spreadsheet
+            // writes it, because that is what somebody arriving from one will type.
+            const place = parseCoordinate(token.value);
+            if (place) {
+                coordinates = true;
+                if (!eat(':')) {
+                    return { kind: 'at', row: place.row, col: place.col };
+                }
+                const next = peek();
+                const far = next?.kind === 'name' ? parseCoordinate(next.value) : null;
+                if (!far) {
+                    return { ok: false, code: 'syntax', at: ':' };
+                }
+                at++;
+                return {
+                    kind: 'area',
+                    top: Math.min(place.row, far.row),
+                    left: Math.min(place.col, far.col),
+                    bottom: Math.max(place.row, far.row),
+                    right: Math.max(place.col, far.col)
+                };
+            }
+            if (!eat('(')) {
+                // A bare word is a name nothing answers to — the reader probably meant a column,
+                // which is written in brackets.
+                return { ok: false, code: 'name', at: token.value };
+            }
+            const args = [];
+            if (!eat(')')) {
+                for (;;) {
+                    const argument = parseExpression();
+                    if (failed(argument)) {
+                        return argument;
+                    }
+                    args.push(argument);
+                    // A comma or a semicolon: the same separator wears both costumes depending on
+                    // where the reader learnt to write formulas.
+                    if (eat(',') || eat(';')) {
+                        continue;
+                    }
+                    if (eat(')')) {
+                        break;
+                    }
+                    return { ok: false, code: 'syntax', at: ')' };
+                }
+            }
+            return { kind: 'call', name: upper, args };
+        }
+        if (token.value === '(') {
+            at++;
+            const inner = parseExpression();
+            if (failed(inner)) {
+                return inner;
+            }
+            if (!eat(')')) {
+                return { ok: false, code: 'syntax', at: ')' };
+            }
+            return inner;
+        }
+        return { ok: false, code: 'syntax', at: token.value };
+    }
+    const node = parseExpression();
+    if (failed(node)) {
+        return node;
+    }
+    if (at < tokens.length) {
+        const rest = tokens[at];
+        return { ok: false, code: 'syntax', at: rest.kind === 'symbol' || rest.kind === 'name' ? String(rest.value) : 'end' };
+    }
+    return { node, cells: [...cells], columns: [...columns], coordinates };
+}
+
+const where = (row, alias) => `${row}\t${alias}`;
+/**
+ * Runs every formula in a sheet, in whatever order the dependencies demand.
+ *
+ * Worked out lazily and remembered: a cell is run the first time something needs it, and a column
+ * read by twenty rows is not run twenty times. The walk carries the cells it is in the middle of,
+ * which is how a circle is caught the moment it closes rather than by counting to a thousand.
+ *
+ * @returns Every cell of the sheet, ready to be shown.
+ */
+function evaluateSheet(input) {
+    const { rows, columns, raw } = input;
+    const byAlias = new Map(columns.map((column) => [column.key, column]));
+    const done = new Map();
+    const parsed = new Map();
+    const running = new Set();
+    /** The formula of a cell, parsed once however many cells hold the same text. */
+    function formulaOf(text) {
+        let result = parsed.get(text);
+        if (!result) {
+            result = parseFormula(text);
+            parsed.set(text, result);
+        }
+        return result;
+    }
+    function valueOf(rowIndex, alias) {
+        const key = where(rowIndex, alias);
+        const already = done.get(key);
+        if (already) {
+            return already;
+        }
+        const column = byAlias.get(alias);
+        if (!column || rowIndex < 0 || rowIndex >= rows.length) {
+            return { value: null, failure: { ok: false, code: 'name', at: alias } };
+        }
+        // A column that carries its own formula answers with it, whatever the row happens to hold.
+        // The reader cannot type over one, so what is underneath is not a value that was replaced
+        // — it is a value that was never asked for.
+        const source = column.formula ?? raw(rowIndex, column);
+        if (!isFormula(source)) {
+            const plain = { value: source };
+            done.set(key, plain);
+            return plain;
+        }
+        // Already on the stack: the cell needs itself. Remembered as a failure so the other cells
+        // that read it fail the same way instead of starting the walk again.
+        if (running.has(key)) {
+            const circular = { value: null, failure: { ok: false, code: 'cycle', at: alias } };
+            done.set(key, circular);
+            return circular;
+        }
+        const formula = formulaOf(source);
+        if ('ok' in formula) {
+            const broken = { value: null, failure: formula };
+            done.set(key, broken);
+            return broken;
+        }
+        running.add(key);
+        const outcome = evaluateFormula(formula, {
+            cell: (name) => (byAlias.has(name) ? valueOf(rowIndex, name).value : undefined),
+            // A whole column leaves out the cell that is asking for it, and only when the cell is
+            // in that very column. `=SUM([total:])` written in the total row is what everybody
+            // writes and what everybody means; taken at its word it is a sum that needs its own
+            // answer, and the reader is shown `#CYCLE!` for asking the obvious thing. Reading a
+            // different column is untouched: a total row summing the prices sums every price.
+            column: (name) => byAlias.has(name)
+                ? rows
+                    .map((_, index) => name === alias && index === rowIndex ? null : valueOf(index, name).value)
+                    .filter((_, index) => !(name === alias && index === rowIndex))
+                : undefined,
+            // A coordinate is the same walk under another name, so a circle drawn with `B3` is
+            // caught exactly as one drawn with an alias.
+            at: (row, col) => {
+                const target = columns[col];
+                return target && row >= 0 && row < rows.length
+                    ? valueOf(row, target.key).value
+                    : undefined;
+            },
+            area: (top, left, bottom, right) => {
+                if (left < 0 || right >= columns.length || top < 0 || bottom >= rows.length) {
+                    return undefined;
+                }
+                const values = [];
+                for (let row = top; row <= bottom; row++) {
+                    for (let col = left; col <= right; col++) {
+                        // The cell asking is left out of its own rectangle, for the same reason a
+                        // whole column leaves it out: a total inside the range it totals.
+                        if (row === rowIndex && columns[col]?.key === alias) {
+                            continue;
+                        }
+                        values.push(valueOf(row, columns[col].key).value);
+                    }
+                }
+                return values;
+            }
+        });
+        running.delete(key);
+        // A cell that turned out to be part of a circle answers with the circle, not with the
+        // half-answer the walk happened to reach before it noticed.
+        const settled = done.get(key);
+        if (settled?.failure?.code === 'cycle') {
+            return settled;
+        }
+        const result = outcome.ok
+            ? { value: outcome.value }
+            : { value: null, failure: outcome };
+        done.set(key, result);
+        return result;
+    }
+    return rows.map((_, rowIndex) => {
+        const line = {};
+        for (const column of columns) {
+            line[column.key] = valueOf(rowIndex, column.key);
+        }
+        return line;
+    });
+}
+
+/**
+ * What a cell shows for a formula that could not be worked out.
+ *
+ * The spreadsheet spellings rather than sentences: they fit in a cell, they are the same in every
+ * language, and anybody who has used a spreadsheet already knows what `#DIV/0!` means. They also
+ * travel — a file exported with `#DIV/0!` in a cell says the same thing to whoever opens it in
+ * Excel as it did here.
+ */
+const FORMULA_ERROR_TEXT = {
+    syntax: '#SYNTAX!',
+    name: '#NAME?',
+    'divide-by-zero': '#DIV/0!',
+    cycle: '#CYCLE!',
+    type: '#VALUE!'
+};
+/** Every spelling, for telling an error apart from something a reader typed. */
+const FORMULA_ERRORS = Object.values(FORMULA_ERROR_TEXT);
+/** What to show for a failure. */
+function formulaErrorText(failure) {
+    return FORMULA_ERROR_TEXT[failure.code];
+}
+
+/**
+ * What to offer a reader who is in the middle of writing a formula.
+ *
+ * A formula names columns by an alias that is nowhere on screen — the header shows a title meant
+ * for people, not the key the formula needs — so writing one from memory means knowing something
+ * the sheet never showed. That is the actual problem: not that the language is hard, but that the
+ * words are hidden.
+ *
+ * Kept as arithmetic over strings, with no DOM and no component, so the awkward parts — where the
+ * word being typed starts, what counts as one — can be held still by a test.
+ */
+/** The functions the engine knows, with a word on each. */
+const HUB_FORMULA_FUNCTIONS = [
+    { name: 'SUM', hint: 'Adds numbers and whole columns' },
+    { name: 'AVERAGE', hint: 'The mean of what is there, gaps left out' },
+    { name: 'MIN', hint: 'The least of them' },
+    { name: 'MAX', hint: 'The most of them' },
+    { name: 'COUNT', hint: 'How many are numbers' },
+    { name: 'ROUND', hint: 'To a given number of places' },
+    { name: 'ABS', hint: 'Without its sign' },
+    { name: 'IF', hint: 'One answer or the other' },
+    { name: 'AND', hint: 'True when all of them are' },
+    { name: 'OR', hint: 'True when any of them is' },
+    { name: 'NOT', hint: 'The opposite' },
+    { name: 'CONCAT', hint: 'Joins text together' },
+    { name: 'LEN', hint: 'How long a piece of text is' }
+];
+/**
+ * The word the caret is in the middle of.
+ *
+ * Inside brackets it is a column being named — `[pri` — and everywhere else it is a function, or
+ * the beginning of one. Everything before the last operator, bracket or space is settled and is
+ * left alone.
+ */
+function formulaFragment(draft, caret = draft.length) {
+    const upTo = draft.slice(0, caret);
+    const opened = upTo.lastIndexOf('[');
+    const closed = upTo.lastIndexOf(']');
+    if (opened > closed) {
+        return { start: opened + 1, text: upTo.slice(opened + 1), inBrackets: true };
+    }
+    const match = /[A-Za-z_][A-Za-z0-9_]*$/.exec(upTo);
+    return match ? { start: match.index, text: match[0], inBrackets: false } : { start: caret, text: '', inBrackets: false };
+}
+/**
+ * What to offer for a draft, in the order it should be shown.
+ *
+ * Columns first while inside brackets, functions first outside them, because that is what the
+ * reader is asking for by having typed the bracket at all. An empty fragment offers everything:
+ * somebody who has just typed `=` is exactly the person who needs the list most.
+ *
+ * @param draft - The formula as it stands, `=` and all.
+ * @param vocabulary - The aliases the sheet has.
+ * @param caret - Where the caret is; the end of the draft when not given.
+ */
+function suggestFormula(draft, vocabulary, caret = draft.length) {
+    if (!draft.trimStart().startsWith('=')) {
+        return [];
+    }
+    const fragment = formulaFragment(draft, caret);
+    const needle = fragment.text.toLocaleLowerCase();
+    const matches = (candidate) => !needle || candidate.toLocaleLowerCase().startsWith(needle);
+    const columns = vocabulary.aliases
+        .filter((alias) => matches(alias))
+        .map((alias) => ({
+        label: alias,
+        kind: 'column',
+        // Inside brackets the brackets are already there; outside, they come with it.
+        insert: fragment.inBrackets ? alias : `[${alias}]`,
+        hint: vocabulary.titles?.[alias]
+    }));
+    const functions = fragment.inBrackets
+        ? []
+        : HUB_FORMULA_FUNCTIONS.filter((entry) => matches(entry.name)).map((entry) => ({
+            label: entry.name,
+            kind: 'function',
+            insert: `${entry.name}(`,
+            hint: entry.hint
+        }));
+    return fragment.inBrackets ? columns : [...functions, ...columns];
+}
+/**
+ * The draft with a suggestion put in, and where the caret should end up.
+ *
+ * The caret matters more than it looks: dropped at the end of `SUM(` it carries straight on into
+ * the brackets, and dropped after `[price]` it is ready for the operator. Leaving it where it was
+ * makes the reader move it by hand every single time.
+ */
+function applySuggestion(draft, suggestion, caret = draft.length) {
+    const fragment = formulaFragment(draft, caret);
+    const before = draft.slice(0, fragment.start);
+    const after = draft.slice(caret);
+    // A closing bracket the reader has already typed is not doubled.
+    const trailing = fragment.inBrackets && after.startsWith(']') ? after.slice(1) : after;
+    const insert = fragment.inBrackets ? `${suggestion.insert}]` : suggestion.insert;
+    return { draft: before + insert + trailing, caret: before.length + insert.length };
+}
+
+/**
+ * The optional adapter a sheet renders its list cells through.
+ *
+ * Injected with `{ optional: true }`: absent means "draw the native list", which is what the
+ * library does on its own. Register it with {@link provideHubSpreadsheetControls}.
+ */
+const HUB_SPREADSHEET_CONTROLS = new InjectionToken('HUB_SPREADSHEET_CONTROLS');
+
+/**
+ * Renders a cell's editor through the optional {@link HUB_SPREADSHEET_CONTROLS} adapter.
+ *
+ * Placed on an `<ng-container>` in the branch that only runs when an adapter is registered; the
+ * native list stays in the branch beside it as the answer that needs nothing installed. The
+ * control is created as a sibling of the anchor and torn down with it.
+ *
+ * The config is read once, when the editor opens. A cell editor lives for one decision — it opens,
+ * the reader chooses, it closes — so there is nothing to keep in sync afterwards, and the value
+ * arriving from elsewhere mid-edit is the case the sheet already refuses.
+ */
+class HubSpreadsheetControlDirective {
+    /** What to build. */
+    config = input.required({ ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'hubSpreadsheetControl' });
+    vcr = inject(ViewContainerRef);
+    adapter = inject(HUB_SPREADSHEET_CONTROLS, { optional: true });
+    handle = null;
+    constructor() {
+        // After the cell has been laid out, so a control that measures itself against its host —
+        // a panel deciding whether to open upwards — reads a box that is already the cell's.
+        afterNextRender(() => {
+            this.handle = this.adapter?.create(this.vcr, this.config()) ?? null;
+        });
+    }
+    ngOnDestroy() {
+        this.handle?.destroy();
+        this.handle = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubSpreadsheetControlDirective, isStandalone: true, selector: "[hubSpreadsheetControl]", inputs: { config: { classPropertyName: "config", publicName: "hubSpreadsheetControl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubSpreadsheetControl]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetControl", required: true }] }] } });
+
+/** Whether two coordinates are the same cell. */
+function sameCell(a, b) {
+    return a.row === b.row && a.col === b.col;
+}
+/** The rectangle a block occupies. */
+function boundsOf(span) {
+    return {
+        top: span.row,
+        left: span.col,
+        bottom: span.row + span.rowSpan - 1,
+        right: span.col + span.colSpan - 1
+    };
+}
+/** Whether two rectangles share at least one cell. */
+function overlaps(a, b) {
+    return a.left <= b.right && b.left <= a.right && a.top <= b.bottom && b.top <= a.bottom;
+}
+/** The blocks that share a cell with a rectangle, in the order they were declared. */
+function spansWithin(spans, range) {
+    return spans.filter((span) => overlaps(boundsOf(span), range));
+}
+/**
+ * The block a selection would become, and the blocks it swallows.
+ *
+ * `null` for a selection of one cell that is not already a block: there is nothing to merge, and
+ * an entry that does nothing should not be offered.
+ */
+function mergeRequestFor(spans, range) {
+    const rowSpan = range.bottom - range.top + 1;
+    const colSpan = range.right - range.left + 1;
+    if (rowSpan < 1 || colSpan < 1 || (rowSpan === 1 && colSpan === 1)) {
+        return null;
+    }
+    return {
+        span: { row: range.top, col: range.left, rowSpan, colSpan },
+        replaced: spansWithin(spans, range).map((span) => ({ row: span.row, col: span.col }))
+    };
+}
+/**
+ * The list of blocks after a merge.
+ *
+ * The swallowed ones are dropped rather than left behind: two blocks claiming the same cell is a
+ * sheet that draws one of them and loses the other, and which one depends on the order they happen
+ * to be declared in.
+ */
+function applySpanMerge(spans, request) {
+    const kept = spans.filter((span) => !request.replaced.some((anchor) => sameCell(anchor, span)));
+    return [...kept, request.span];
+}
+/** The list of blocks after the ones anchored at `anchors` are taken apart. */
+function applySpanUnmerge(spans, anchors) {
+    return spans.filter((span) => !anchors.some((anchor) => sameCell(anchor, span)));
+}
+
+/**
+ * The height a row is assumed to have on the very first frame of a virtualised sheet, in pixels.
+ *
+ * Only ever used once: there is nothing to measure until something is drawn, and what is drawn
+ * depends on the height. A rough number breaks that circle, and the measurement that follows
+ * replaces it on the next frame. Being wrong costs a few rows too many or too few for one frame;
+ * waiting for certainty costs drawing every row there is.
+ */
+const FIRST_PASS_ROW_HEIGHT = 32;
+/**
+ * An editable sheet of cells: typed into, moved through with the keyboard, and pasted into from
+ * a spreadsheet.
+ *
+ * It knows nothing about what the cells mean. The owner describes each column, keeps the save
+ * state it cares about, and does the writing when the sheet reports a change. The sheet never
+ * mutates the rows it is given, which is what lets the same component serve an invoice, a price
+ * list and a timesheet without learning about any of them.
+ *
+ * Focus lives on the cells themselves, with one tab stop that travels — the arrangement screen
+ * readers expect from a grid. Pasting is the exception: a browser only dispatches `paste` to an
+ * editable element, so the paste shortcut hands focus to an off-screen field for the length of
+ * the event and takes it straight back.
+ */
+class HubSpreadsheetComponent {
+    #host = inject(ElementRef);
+    #injector = inject(Injector);
+    /** The rows, as the owner holds them. Never written to. */
+    rows = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** What each column shows and allows. */
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** A stable name per row, so a save state follows its row across a reload. */
+    rowKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    /** The save state of each cell, keyed by `rowKey` and column alias joined by a tab. */
+    states = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "states" }] : /* istanbul ignore next */ []));
+    /**
+     * A validation message per cell, keyed the same way as {@link states}.
+     *
+     * Owned by the host, because validation belongs to whoever knows what the data means. Keeping
+     * it a plain map rather than tying it to one forms API is what lets the same sheet be driven
+     * by Signal Forms, by reactive forms, or by nothing at all.
+     */
+    errors = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** The character this reader types decimals with. */
+    decimalMark = input(',', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decimalMark" }] : /* istanbul ignore next */ []));
+    /** What an empty sheet says. */
+    emptyText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** How many rows Page Up and Page Down travel. */
+    pageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Turns off every editor, whatever the individual cells say. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * How many columns stay pinned against the leading edge while the sheet scrolls sideways.
+     *
+     * Counted from the start, the way a spreadsheet freezes panes, rather than marked one by one:
+     * a set of frozen columns with a gap in it cannot be laid out, so the shape of the input rules
+     * the mistake out instead of validating against it.
+     */
+    frozenColumns = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frozenColumns" }] : /* istanbul ignore next */ []));
+    /** How many rows stay pinned below the header while the sheet scrolls down. */
+    frozenRows = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frozenRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Cells merged into blocks, each named by its top-left corner.
+     *
+     * Owned by the host, which is why they come in as an input and why the reader's merging goes
+     * back out as a request rather than being done here — see {@link mergeable}. A declared block
+     * is treated as one cell everywhere it matters: the cursor lands on the block rather than
+     * inside it, a selection that would clip one grows to contain it, and the covered cells are
+     * not drawn at all.
+     */
+    spans = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spans" }] : /* istanbul ignore next */ []));
+    /** Which structural changes the reader may ask for. Everything is refused by default. */
+    structure = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "structure" }] : /* istanbul ignore next */ []));
+    /** Editors supplied by the host, one per column alias. */
+    customEditors = contentChildren(HubSpreadsheetEditorDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customEditors" }] : /* istanbul ignore next */ []));
+    /** Cell templates supplied by the host, for what a column shows while it is not being edited. */
+    customCells = contentChildren(HubSpreadsheetCellDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customCells" }] : /* istanbul ignore next */ []));
+    /** Aliases retired by earlier deletions, so a new column never reuses one. */
+    retiredColumnKeys = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "retiredColumnKeys" }] : /* istanbul ignore next */ []));
+    /** Whether the sheet offers the fill handle at the corner of the selection. */
+    fillHandle = input(false, { ...(ngDevMode ? { debugName: "fillHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether undo is available; the sheet only asks, the owner keeps the history. */
+    canUndo = input(false, { ...(ngDevMode ? { debugName: "canUndo" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether redo is available. */
+    canRedo = input(false, { ...(ngDevMode ? { debugName: "canRedo" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether a reader may drag a column's trailing edge to widen or narrow it. */
+    resizableColumns = input(false, { ...(ngDevMode ? { debugName: "resizableColumns" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether a reader may drag a header to put the column somewhere else. */
+    reorderableColumns = input(false, { ...(ngDevMode ? { debugName: "reorderableColumns" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The width of each column in pixels, keyed by alias.
+     *
+     * Two-way, and view state rather than data: the sheet writes it as the reader drags, and the
+     * owner may persist it so a layout survives a reload. A column with no entry keeps whatever
+     * width its content asks for.
+     */
+    columnWidths = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    /** The narrowest a column may be dragged. */
+    minColumnWidth = input(48, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a right-click offers the menu of structural changes.
+     *
+     * Off unless asked for, and each entry still has to pass `structure`. A menu that lists what
+     * the reader is not allowed to do is worse than no menu.
+     */
+    contextMenu = input(false, { ...(ngDevMode ? { debugName: "contextMenu" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the reader may put cells together and take them apart again.
+     *
+     * Off unless asked for, like every other structural change: a sheet whose shape is part of the
+     * document it belongs to should not be reshaped by a stray right-click. The blocks stay the
+     * host's — the sheet reports what was asked for through {@link mergeRequested} and
+     * {@link unmergeRequested} and writes nothing itself. Offered through the context menu, so it
+     * needs {@link contextMenu} to be reachable with the pointer.
+     */
+    mergeable = input(false, { ...(ngDevMode ? { debugName: "mergeable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether a cell whose value starts with `=` is a formula.
+     *
+     * Off unless asked for, and not as caution for its own sake: a column of text may perfectly
+     * well hold `=1+1` as the thing somebody wrote, and a sheet that decides to do arithmetic on
+     * it has lost the reader's data.
+     *
+     * Formulas read columns by their alias — `=[price] * [units]`, `=SUM([total:])` — never by a
+     * coordinate, which is what the aliases were for: move a column, rename its header, and every
+     * formula still means what it said.
+     *
+     * The cell shows the answer; the editor shows the formula, so it can be corrected rather than
+     * retyped; and the clipboard carries what the cell holds, which is the formula.
+     */
+    formulas = input(false, { ...(ngDevMode ? { debugName: "formulas" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to draw only the rows the reader can see.
+     *
+     * Off unless asked for. A sheet of a few hundred rows is better off whole — every row is in the
+     * document, so the browser's own find works, printing works, and nothing depends on a
+     * measurement. Past a few thousand it stops being a choice: the first paint arrives late and
+     * every keystroke pays for cells nobody is looking at.
+     *
+     * What it costs: the rows out of view are not in the document, so `Ctrl+F` and printing only
+     * reach what is drawn, and the rows have to be of one height — see {@link rowHeight}.
+     */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * How tall a row is, in pixels, when {@link virtual} is on.
+     *
+     * Nought means "measure the first one drawn", which is right whenever the rows are alike. Say
+     * it outright for a sheet whose first row is not typical, or one that is built while hidden —
+     * a tab that is not open measures every row as nought, and a window worked out from nought is
+     * the whole sheet.
+     */
+    rowHeight = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * What opens the editor with the pointer.
+     *
+     * `double-click` by default, the spreadsheet convention: a click picks the cell and leaves its
+     * value where it is. Selecting is the gesture a reader makes most — to copy, to look, to drag
+     * out a range — and turning every one of them into an open field puts the value at the mercy
+     * of the next keystroke. Typing is still the short way in: with the cell picked, the first
+     * character opens the editor and lands in it, so nothing is lost by not opening on the click.
+     *
+     * `click` opens on the first one, for a sheet that exists to be typed into and where the two
+     * gestures per cell are the tax.
+     *
+     * Either way the editor opens on release and only when the pointer did not travel, so
+     * dragging out a range still works — and Shift-clicking still extends rather than edits.
+     */
+    editOn = input('double-click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editOn" }] : /* istanbul ignore next */ []));
+    /** A cell took a new value. */
+    commit = output();
+    /** A block was pasted. */
+    pasted = output();
+    /** Delete was pressed over these cells, the editable ones of the selection. */
+    cleared = output();
+    /** The selected rectangle changed; null when nothing is selected. */
+    selectionChange = output();
+    /** The reader asked to add rows or columns. */
+    insertRequested = output();
+    /** The reader asked to remove rows or columns. */
+    deleteRequested = output();
+    /**
+     * A drag of the fill handle finished.
+     *
+     * Reported as one event for the whole gesture, so an owner keeping a history can make it one
+     * undo step. Filling cell by cell and undoing cell by cell is experienced as a bug.
+     */
+    filled = output();
+    /** The reader asked to undo. The owner holds the history and decides what that means. */
+    undoRequested = output();
+    /** The reader asked to redo. */
+    redoRequested = output();
+    /**
+     * The reader dropped a column somewhere else.
+     *
+     * Reported rather than applied: the column list belongs to the owner, as the rows do. The
+     * payload carries the reordered aliases so acting on it is a single assignment.
+     */
+    columnMoved = output();
+    /**
+     * The reader asked to put a selection together into one block.
+     *
+     * The payload carries the block to create and the anchors of the blocks it swallows, because a
+     * host that merely appends the new one ends up with two claiming the same cell — and which of
+     * them is drawn depends on the order they were declared in. `applySpanMerge()` does the whole
+     * thing in a line.
+     */
+    mergeRequested = output();
+    /** The reader asked to take apart the blocks their selection touches, named by their anchors. */
+    unmergeRequested = output();
+    /** The cell the cursor is on. */
+    active = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** The other corner of the selection; null when only the active cell is selected. */
+    anchor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    editing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    draft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    /**
+     * The control adapter, when the project registered one.
+     *
+     * Optional on purpose: without it the sheet draws its own native list, which is what makes the
+     * library installable on its own.
+     */
+    #controls = inject(HUB_SPREADSHEET_CONTROLS, { optional: true });
+    /**
+     * The character that opened the cell, when typing opened it.
+     *
+     * Kept beside the draft rather than inside it because a supplied editor needs it as it was
+     * typed, while the draft has already been turned into whatever the column stores.
+     */
+    seed = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seed" }] : /* istanbul ignore next */ []));
+    /** The editor holds text that does not read as a value, so it stays open and marked. */
+    invalid = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dragging = false;
+    /** Whether the pointer visited another cell during this press, which makes it a drag. */
+    dragMoved = false;
+    /** The selection a fill drag started from; null when no fill is in progress. */
+    fillSource = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillSource" }] : /* istanbul ignore next */ []));
+    /** What the fill would cover if released now. */
+    fillTarget = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillTarget" }] : /* istanbul ignore next */ []));
+    /** The column being widened, with where the pointer started and how wide it then was. */
+    resizing = null;
+    /** The column being dragged to another place. */
+    movingColumn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "movingColumn" }] : /* istanbul ignore next */ []));
+    /** Where it would land if dropped now. */
+    moveTargetColumn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moveTargetColumn" }] : /* istanbul ignore next */ []));
+    /** Where the structural menu sits, in pixels from the sheet's own corner; null when closed. */
+    menuAt = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuAt" }] : /* istanbul ignore next */ []));
+    /** Where each frozen column sits, in pixels from the leading edge. */
+    columnOffsets = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOffsets" }] : /* istanbul ignore next */ []));
+    /** Where each frozen row sits, in pixels from the top of the scroll area. */
+    rowOffsets = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowOffsets" }] : /* istanbul ignore next */ []));
+    /** The merges, indexed once per change rather than scanned on every keystroke. */
+    spanMap = computed(() => buildSpanMap(this.spans()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spanMap" }] : /* istanbul ignore next */ []));
+    bounds = computed(() => ({
+        rows: this.rows().length,
+        cols: this.columns().length
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    /**
+     * What the viewport has told us about itself: how far it has scrolled and how tall it is.
+     *
+     * Nought until the first measurement, which is why {@link gridWindow} draws a first screenful
+     * from nothing rather than drawing nothing: the rows it puts in are what the measurement then
+     * measures.
+     */
+    viewport = viewChild('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    viewportHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** The height of a row, measured off the first one drawn unless the host declared it. */
+    measuredRowHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredRowHeight" }] : /* istanbul ignore next */ []));
+    /** How far the viewport has travelled sideways, and how much of it is on screen. */
+    scrollLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
+    viewportWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
+    /** The width of every column, by index, as last measured. */
+    measuredColumnWidths = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredColumnWidths" }] : /* istanbul ignore next */ []));
+    /** The rows to draw: the frozen ones, then the window, or all of them when not virtualising. */
+    rowWindow = computed(() => {
+        const total = this.rows().length;
+        const frozen = Math.min(this.frozenRows(), total);
+        if (!this.virtual()) {
+            return { start: frozen, end: total - 1, before: 0, after: 0 };
+        }
+        // Nothing measured and nothing declared, which is only ever the first frame: a rough height
+        // rather than the whole sheet. Drawing it whole once is exactly the cost virtualising is
+        // here to avoid — ten thousand rows took a minute and a half of it — and the measurement
+        // that follows lands on the real height before anybody sees the difference.
+        const size = this.rowHeight() || this.measuredRowHeight() || FIRST_PASS_ROW_HEIGHT;
+        const window = gridWindow({
+            offset: this.scrollTop(),
+            viewport: this.viewportHeight(),
+            sizes: size,
+            count: total,
+            pinned: frozen
+        });
+        return growWindowToSpans(window, this.spans(), 'row', size, { count: total, pinned: frozen });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowWindow" }] : /* istanbul ignore next */ []));
+    /**
+     * The columns to draw, the same way as the rows.
+     *
+     * Their widths are measured rather than declared, so the first render draws them all — there
+     * is nothing to measure otherwise — and every render after that windows them with what the
+     * first one learnt. A column the sheet has never drawn has no width, and one unknown width is
+     * enough to fall back to drawing the lot: a window is only as honest as the sizes it is built
+     * from.
+     */
+    columnWindow = computed(() => {
+        const total = this.columns().length;
+        const frozen = Math.min(this.frozenColumns(), total);
+        const everything = { start: frozen, end: total - 1, before: 0, after: 0 };
+        if (!this.virtual()) {
+            return everything;
+        }
+        const widths = this.measuredColumnWidths();
+        if (widths.length !== total || widths.some((width) => !(width > 0))) {
+            return everything;
+        }
+        const window = gridWindow({
+            offset: this.scrollLeft(),
+            viewport: this.viewportWidth(),
+            sizes: widths,
+            pinned: frozen
+        });
+        return growWindowToSpans(window, this.spans(), 'col', widths, { pinned: frozen });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWindow" }] : /* istanbul ignore next */ []));
+    /** The column indices in the document, frozen ones first. */
+    drawnColumns = computed(() => {
+        const total = this.columns().length;
+        const frozen = Math.min(this.frozenColumns(), total);
+        const window = this.columnWindow();
+        const drawn = [];
+        for (let index = 0; index < frozen; index++) {
+            drawn.push(index);
+        }
+        for (let index = window.start; index <= window.end; index++) {
+            drawn.push(index);
+        }
+        return drawn;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * How many cells a row of the sheet actually holds, spacers included.
+     *
+     * What a spacer row has to span. `bounds().cols` would be wrong whenever the columns are
+     * windowed — it counts the columns the sheet has, not the ones in the document — and a colspan
+     * that overshoots stretches the table wider than its own header.
+     */
+    drawnCellCount = computed(() => {
+        const window = this.columnWindow();
+        return this.drawnColumns().length + (window.before > 0 ? 1 : 0) + (window.after > 0 ? 1 : 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnCellCount" }] : /* istanbul ignore next */ []));
+    /** The row indices in the document, frozen ones first. */
+    drawnRows = computed(() => {
+        const total = this.rows().length;
+        const frozen = Math.min(this.frozenRows(), total);
+        const window = this.rowWindow();
+        const drawn = [];
+        for (let index = 0; index < frozen; index++) {
+            drawn.push(index);
+        }
+        for (let index = window.start; index <= window.end; index++) {
+            drawn.push(index);
+        }
+        return drawn;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnRows" }] : /* istanbul ignore next */ []));
+    /** Every cell, worked out once per change of rows or columns rather than on every paint. */
+    grid = computed(() => {
+        const columns = this.columns();
+        const cells = this.rows().map((row) => columns.map((column) => column.cell(row)));
+        if (!this.formulas()) {
+            return cells;
+        }
+        const places = new Map(columns.map((column, index) => [column.key, index]));
+        const sheet = evaluateSheet({
+            rows: this.rows(),
+            columns,
+            raw: (rowIndex, column) => cells[rowIndex]?.[places.get(column.key) ?? -1]?.value ?? null
+        });
+        return cells.map((line, rowIndex) => line.map((cell, colIndex) => {
+            const column = columns[colIndex];
+            // Either the row holds a formula, or the column carries one for every row.
+            if (!isFormula(cell.value) && !column.formula) {
+                return cell;
+            }
+            const result = sheet[rowIndex]?.[column.key];
+            // The value stays the formula: it is what the editor opens on and what the
+            // clipboard carries. What changes is what the cell shows.
+            return {
+                ...cell,
+                text: result?.failure ? formulaErrorText(result.failure) : displayValue(result?.value ?? null, column)
+            };
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    /** Which suggestion the keyboard is on, or -1 when the reader has not moved into the list. */
+    suggestionAt = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestionAt" }] : /* istanbul ignore next */ []));
+    /**
+     * What to offer while a formula is being written, or nothing when one is not.
+     *
+     * A formula names columns by an alias the sheet never shows — the header carries a title meant
+     * for people — so without this, writing one means knowing something that is not on screen.
+     */
+    suggestions = computed(() => {
+        if (!this.formulas() || !this.editing()) {
+            return [];
+        }
+        const columns = this.columns();
+        return suggestFormula(this.draft(), {
+            aliases: columns.map((column) => column.key),
+            titles: Object.fromEntries(columns.map((column) => [column.key, column.header]))
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /** Whether the sheet is showing the list of what can go into a formula. */
+    suggesting = computed(() => this.suggestions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggesting" }] : /* istanbul ignore next */ []));
+    /**
+     * The one the keyboard is on, which Enter and Tab put in.
+     *
+     * The first is taken as chosen the moment there is a word being typed, so `=SU` and Tab
+     * finishes it — which is what completing means, and what a reader who has seen a spreadsheet
+     * expects. Nothing is chosen when there is no word: a bare `=`, or a formula that has just
+     * closed a bracket, is a list to look at rather than a completion to accept, and Enter there
+     * means commit.
+     */
+    suggestionIndex = computed(() => {
+        const moved = this.suggestionAt();
+        if (moved >= 0 && moved < this.suggestions().length) {
+            return moved;
+        }
+        return formulaFragment(this.draft()).text && this.suggestions().length ? 0 : -1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestionIndex" }] : /* istanbul ignore next */ []));
+    /** Whether a formula is being written, which is when the aliases are worth showing. */
+    writingFormula = computed(() => this.formulas() && this.editing() && isFormula(this.draft()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "writingFormula" }] : /* istanbul ignore next */ []));
+    /** The letters a column answers to in a formula: A, B … Z, AA. */
+    columnLetter(index) {
+        return columnLabel(index);
+    }
+    /** Puts a suggestion into the draft and leaves the caret where the next thing is typed. */
+    useSuggestion(suggestion) {
+        const editor = this.#host.nativeElement.querySelector('input.hub-spreadsheet__editor');
+        const caret = editor?.selectionStart ?? this.draft().length;
+        const applied = applySuggestion(this.draft(), suggestion, caret);
+        this.draft.set(applied.draft);
+        this.suggestionAt.set(-1);
+        if (editor) {
+            editor.value = applied.draft;
+            editor.focus();
+            editor.setSelectionRange(applied.caret, applied.caret);
+        }
+    }
+    /** Whether a cell is showing a formula that could not be worked out. */
+    hasFormulaError(row, col) {
+        const cell = this.grid()[row]?.[col];
+        const fromColumn = !!this.columns()[col]?.formula;
+        return !!cell && (isFormula(cell.value) || fromColumn) && FORMULA_ERRORS.includes(cell.text ?? '');
+    }
+    keys = computed(() => {
+        const keyOf = this.rowKey();
+        return this.rows().map((row) => keyOf(row));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
+    range = computed(() => {
+        const active = this.active();
+        if (!active) {
+            return null;
+        }
+        const base = clampGridRange(gridRangeBetween(this.anchor() ?? active, active), this.bounds());
+        // A range that clips a merge cannot be copied, filled or cleared coherently, so it grows
+        // until every block it touches is inside it — which is what Excel does too.
+        return base ? clampGridRange(coversRange(this.spanMap(), base), this.bounds()) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /**
+     * Keeps the cursor where it was when the rows are replaced by a reload after a save, and drops
+     * it only once it points at nothing. Typing a value and pressing Enter has to land on the cell
+     * below even when the saved figures come back as fresh objects.
+     */
+    reconcile = effect(() => {
+        const { rows, cols } = this.bounds();
+        untracked(() => {
+            const active = this.active();
+            if (active && (active.row >= rows || active.col >= cols)) {
+                this.active.set(null);
+                this.anchor.set(null);
+                this.editing.set(false);
+            }
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reconcile" }] : /* istanbul ignore next */ []));
+    /**
+     * Keeps the viewport's measurements up to date while virtualising.
+     *
+     * In the read phase, like the frozen offsets: reading layout while the browser is writing one
+     * forces a reflow in the middle of it, which is how a grid loses frames exactly when it is
+     * being scrolled.
+     *
+     * It settles rather than loops. Measuring feeds the window, the window changes what is drawn,
+     * and the next pass measures the same numbers — a signal set to the value it already holds
+     * tells nobody, so the third pass does not happen. It reads `drawnRows` so that a sheet whose
+     * data arrives later is measured when its first row finally exists, which is the common case
+     * and the one a single measurement at birth gets wrong.
+     */
+    measureViewport = afterRenderEffect({
+        read: () => {
+            if (!this.virtual()) {
+                return;
+            }
+            this.drawnRows();
+            this.onViewportScroll();
+        }
+    });
+    /**
+     * The width of every column, read off the headers by the index they carry.
+     *
+     * By index and not by position, because a windowed header holds the frozen columns and then
+     * the ones in view — so the third header in the document is rarely the third column. A width
+     * that is not on screen keeps whatever was measured last, which is what makes windowing the
+     * columns possible at all: they are measured once, while the sheet is still drawing them all.
+     */
+    readColumnWidths() {
+        const total = this.columns().length;
+        const known = [...this.measuredColumnWidths()];
+        known.length = total;
+        for (const header of this.#host.nativeElement.querySelectorAll('.hub-spreadsheet__header')) {
+            const index = Number(header.getAttribute('data-header'));
+            const width = header.getBoundingClientRect().width;
+            if (Number.isInteger(index) && index >= 0 && index < total && width > 0) {
+                known[index] = width;
+            }
+        }
+        const measured = Array.from(known, (width) => width ?? 0);
+        const previous = this.measuredColumnWidths();
+        // Only when something actually moved. A fresh array is a fresh reference, and a reference
+        // set after every render is a render after every render: the measurement feeds the window,
+        // the window is drawn, and the drawing measures again for ever.
+        if (measured.length !== previous.length || measured.some((width, index) => width !== previous[index])) {
+            this.measuredColumnWidths.set(measured);
+        }
+        return measured;
+    }
+    /**
+     * Measures the frozen tracks after every render and turns the sizes into offsets.
+     *
+     * Reading layout has to happen in the read phase or it forces a synchronous reflow in the
+     * middle of writing one, which is the classic way a grid loses frames while scrolling.
+     */
+    measureFrozen = afterRenderEffect({
+        read: () => {
+            const columns = this.frozenColumns();
+            const rows = this.frozenRows();
+            const widths = this.readColumnWidths();
+            if (columns <= 0 && rows <= 0) {
+                this.columnOffsets.set([]);
+                this.rowOffsets.set([]);
+                return;
+            }
+            const host = this.#host.nativeElement;
+            const bodyRows = [...host.querySelectorAll('.hub-spreadsheet__row')];
+            this.columnOffsets.set(frozenOffsets(widths, columns));
+            // Frozen rows start below the header, which is itself pinned at the top.
+            const headerHeight = host.querySelector('.hub-spreadsheet__header')?.getBoundingClientRect().height ?? 0;
+            this.rowOffsets.set(frozenOffsets(bodyRows.map((row) => row.getBoundingClientRect().height), rows).map((offset) => offset + Math.round(headerHeight)));
+        }
+    });
+    /**
+     * Whether a column is pinned.
+     *
+     * Answered from the input alone, never from the measurement. A cell is taken out of the flow
+     * because the caller asked for it; the measured offset only decides where it lands. Gating
+     * the two on the same signal would leave the pane unpinned for the frame before the first
+     * measurement, and permanently unpinned anywhere the render hooks do not run.
+     */
+    isFrozenColumn(col) {
+        return col < Math.min(this.frozenColumns(), this.bounds().cols);
+    }
+    /** Whether a row is pinned. Same reasoning as {@link isFrozenColumn}. */
+    isFrozenRow(row) {
+        return row < Math.min(this.frozenRows(), this.bounds().rows);
+    }
+    /** Where a frozen column sits, once measured; null until then, and the stylesheet pins it at zero. */
+    columnOffsetOf(col) {
+        return this.isFrozenColumn(col) ? (this.columnOffsets()[col] ?? null) : null;
+    }
+    /** Where a frozen row sits, once measured. */
+    rowOffsetOf(row) {
+        return this.isFrozenRow(row) ? (this.rowOffsets()[row] ?? null) : null;
+    }
+    isColumnEdge(col) {
+        return isFrozenEdge(col, Math.min(this.frozenColumns(), this.bounds().cols));
+    }
+    isRowEdge(row) {
+        return isFrozenEdge(row, Math.min(this.frozenRows(), this.bounds().rows));
+    }
+    /** Whether a cell is swallowed by a merge, and therefore not rendered. */
+    isHidden(row, col) {
+        return isCovered(this.spanMap(), { row, col });
+    }
+    /** How many rows a cell occupies; null leaves the attribute off. */
+    rowSpanOf(row, col) {
+        const span = spanAt(this.spanMap(), { row, col });
+        return span && span.rowSpan > 1 ? span.rowSpan : null;
+    }
+    /** How many columns a cell occupies; null leaves the attribute off. */
+    colSpanOf(row, col) {
+        const span = spanAt(this.spanMap(), { row, col });
+        return span && span.colSpan > 1 ? span.colSpan : null;
+    }
+    /**
+     * Whether a cell reaches the trailing edge of the sheet, counting the columns it spans.
+     *
+     * Asked rather than guessed with `:last-child`. Once cells can be swallowed by a merge, the
+     * last one drawn in a row is not the one in the last column — in a row where the rightmost
+     * block is covered it is the cell before it, and that is the one that would lose its border.
+     */
+    reachesEnd(row, col) {
+        const span = spanAt(this.spanMap(), { row, col });
+        return col + (span?.colSpan ?? 1) - 1 >= this.bounds().cols - 1;
+    }
+    isActive(row, col) {
+        const active = this.active();
+        return !!active && active.row === row && active.col === col;
+    }
+    isSelected(row, col) {
+        return isWithinGridRange({ row, col }, this.range());
+    }
+    tabIndexOf(row, col) {
+        return gridCellTabIndex({ row, col }, this.active(), 'roving');
+    }
+    stateOf(row, col) {
+        return this.states()[this.cellKey(row, col)];
+    }
+    /** The validation message the host attached to a cell, if any. */
+    errorOf(row, col) {
+        return this.errors()[this.cellKey(row, col)];
+    }
+    /** How a cell is addressed in the `states` and `errors` maps. */
+    cellKey(row, col) {
+        return `${this.keys()[row]}\t${this.columns()[col].key}`;
+    }
+    /**
+     * What a cell shows: its own text when it gives one, otherwise whatever its column makes of
+     * the value — an option's label, a mark for a yes, the value itself for everything else.
+     */
+    displayOf(cell, column) {
+        if (cell.text !== undefined && cell.text !== null) {
+            return cell.text;
+        }
+        return displayValue(cell.value, column);
+    }
+    /**
+     * What a hosted control should be for this cell, or null when there is nothing to host.
+     *
+     * Null covers three cases and they are all deliberate: no adapter registered, a column that is
+     * not a list, and a column whose host supplied its own editor — which is read first and wins,
+     * because a template written for one column is a more specific answer than a rule for all of
+     * them.
+     */
+    hostedControl(row, col) {
+        const column = this.columns()[col];
+        if (!this.#controls || this.editorFor(col) || !(column.kind === 'select' || column.options?.length)) {
+            return null;
+        }
+        return {
+            kind: 'select',
+            value: this.grid()[row][col].value,
+            options: column.options?.map((option) => ({ ...option })),
+            label: column.header,
+            labelType: 'visually-hidden',
+            ariaLabel: column.header,
+            placeholder: column.placeholder,
+            // A cell is a search box's whole reason for being wired, it empties with `Delete`, and
+            // the gesture that opened it has been spent by the time it exists.
+            searchable: true,
+            clearable: false,
+            autoOpen: true,
+            searchTerm: this.seed(),
+            onValueChange: (value) => this.commitFromEditor(value)
+        };
+    }
+    /**
+     * Which answer a list shows while it is open.
+     *
+     * Read off the draft rather than off the cell, so a list opened by typing shows the answer that
+     * keystroke reached. The draft holds the stored value until a keystroke moves it, so an
+     * ordinary open still shows what the cell holds.
+     */
+    isChosen(option, column) {
+        return parseForColumn(this.draft(), column, this.decimalMark()) === option.value;
+    }
+    /** Whether a boolean cell is on, which is what draws its checkbox. */
+    isOn(cell) {
+        return isTruthy(cell.value);
+    }
+    /**
+     * What a cell should show to say it opens onto something, or null when it opens onto a field.
+     *
+     * Only drawn on the cell the reader is on. A caret down every row of a column would read as
+     * content and make the sheet look like a form, and it is only ever the current cell that is
+     * about to be opened.
+     */
+    affordanceOf(column, col) {
+        if (column.kind === 'date') {
+            return 'date';
+        }
+        // A column with a supplied editor counts as a list: that hook exists for pickers, and the
+        // sheet cannot see inside the template to know which kind it is.
+        return column.kind === 'select' || column.options?.length || this.editorFor(col) ? 'list' : null;
+    }
+    /** The template this column's editor should use, if the host supplied one. */
+    editorFor(col) {
+        const key = this.columns()[col]?.key;
+        return this.customEditors().find((editor) => editor.column() === key);
+    }
+    /** The template this column draws its cells with, if the host supplied one. */
+    cellTemplateFor(col) {
+        const key = this.columns()[col]?.key;
+        return this.customCells().find((template) => template.column() === key);
+    }
+    /** The context a cell template is rendered with. */
+    cellContext(row, col) {
+        const cell = this.grid()[row][col];
+        return {
+            $implicit: cell.value,
+            cell,
+            row: this.rows()[row],
+            column: this.columns()[col],
+            active: this.isActive(row, col)
+        };
+    }
+    /** The context a custom editor template is rendered with. */
+    editorContext(row, col) {
+        const cell = this.grid()[row][col];
+        return {
+            $implicit: cell.value,
+            seed: this.seed(),
+            cell,
+            row: this.rows()[row],
+            column: this.columns()[col],
+            commit: (value) => this.commitFromEditor(value),
+            cancel: () => this.cancelEdit()
+        };
+    }
+    /** Accepts a value a custom editor or a built-in list reported, and moves on as Enter would. */
+    commitFromEditor(value) {
+        const active = this.active();
+        if (!active) {
+            return;
+        }
+        const column = this.columns()[active.col];
+        const cell = this.grid()[active.row][active.col];
+        this.editing.set(false);
+        this.invalid.set(false);
+        if (value !== cell.value) {
+            this.commit.emit({ coords: active, row: this.rows()[active.row], column, cell, value });
+        }
+        this.moveTo(moveGridFocus(active, { row: 1, col: 0 }, this.bounds(), { horizontal: 'continuous' }), false);
+    }
+    /**
+     * Turns a boolean cell over without opening an editor.
+     *
+     * A checkbox that needs opening, ticking and confirming is three gestures for one bit. The
+     * keyboard reaches it the same way, since a printable character on such a column toggles too.
+     */
+    toggleBoolean(row, col) {
+        if (!this.canEdit(row, col)) {
+            return;
+        }
+        const cell = this.grid()[row][col];
+        const column = this.columns()[col];
+        this.commit.emit({
+            coords: { row, col },
+            row: this.rows()[row],
+            column,
+            cell,
+            value: isTruthy(cell.value) ? 0 : 1
+        });
+    }
+    canEdit(row, col) {
+        // A column with a formula of its own has nothing to type into: the cell shows what the
+        // column works out, and letting a reader replace it would lose the formula for that row
+        // alone, which is the sort of thing nobody notices until the totals stop adding up.
+        if (this.formulas() && this.columns()[col]?.formula) {
+            return false;
+        }
+        return !this.readonly() && !!this.grid()[row]?.[col]?.editable;
+    }
+    onKeydown(event) {
+        const active = this.active();
+        if (!active) {
+            return;
+        }
+        if (this.editing()) {
+            this.catchUp(event);
+            return;
+        }
+        const intent = resolveGridIntent(event, {
+            pageSize: this.pageSize(),
+            editable: !this.readonly()
+        });
+        if (!intent) {
+            return;
+        }
+        // Copy and cut ride the browser's own events, which carry the clipboard. Paste needs the
+        // focus moved to something editable first, or the event is never dispatched at all.
+        if (intent.kind === 'copy' || intent.kind === 'cut') {
+            return;
+        }
+        if (intent.kind === 'paste') {
+            this.focusSink();
+            return;
+        }
+        event.preventDefault();
+        switch (intent.kind) {
+            case 'move':
+                this.moveTo(moveGridFocus(active, intent.delta, this.bounds(), { horizontal: 'continuous' }), intent.extend);
+                break;
+            case 'edge':
+                this.moveTo(resolveGridEdge(active, intent.edge, this.bounds()), intent.extend);
+                break;
+            case 'edit':
+                this.startEdit(intent.seed);
+                break;
+            case 'clear':
+                this.announceCleared();
+                break;
+            case 'cancel':
+                this.anchor.set(null);
+                this.announceSelection();
+                break;
+            case 'select-all':
+                this.selectRange({ top: 0, bottom: this.bounds().rows - 1, left: 0, right: this.bounds().cols - 1 });
+                break;
+            case 'select-row':
+                this.selectRange({ top: active.row, bottom: active.row, left: 0, right: this.bounds().cols - 1 });
+                break;
+            case 'select-col':
+                this.selectRange({ top: 0, bottom: this.bounds().rows - 1, left: active.col, right: active.col });
+                break;
+            case 'undo':
+                if (this.canUndo()) {
+                    this.undoRequested.emit();
+                }
+                break;
+            case 'redo':
+                if (this.canRedo()) {
+                    this.redoRequested.emit();
+                }
+                break;
+        }
+    }
+    onMouseDown(event, row, col) {
+        if (event.button !== 0 || (this.editing() && this.isActive(row, col))) {
+            return;
+        }
+        if (this.editing()) {
+            this.finishEdit(null);
+        }
+        this.dragging = true;
+        this.dragMoved = false;
+        this.moveTo({ row, col }, event.shiftKey);
+    }
+    /**
+     * Opens the editor on release, not on press.
+     *
+     * Pressing would settle the question too early: a press that turns into a drag is a range
+     * selection, and one that does not is a request to type. Waiting for the release is what lets
+     * both gestures start the same way.
+     */
+    onMouseUp(event, row, col) {
+        if (event.button !== 0 ||
+            event.shiftKey ||
+            this.dragMoved ||
+            this.editing() ||
+            this.editOn() !== 'click' ||
+            !this.isActive(row, col)) {
+            return;
+        }
+        this.startEdit(undefined);
+    }
+    onMouseEnter(row, col) {
+        if (this.dragging && !this.isActive(row, col)) {
+            this.dragMoved = true;
+        }
+        if (this.fillSource()) {
+            this.trackFill(row, col);
+            return;
+        }
+        if (this.dragging && !this.isActive(row, col)) {
+            this.moveTo({ row, col }, true);
+        }
+    }
+    /** The width a column has been dragged to, or null while it sizes itself to its content. */
+    widthOf(col) {
+        return this.columnWidths()[this.columns()[col].key] ?? null;
+    }
+    onResizeStart(event, col) {
+        if (event.button !== 0) {
+            return;
+        }
+        // The grip lives inside the header; without this the header would also start a reorder.
+        event.preventDefault();
+        event.stopPropagation();
+        const header = this.#host.nativeElement.querySelector(`[data-header="${col}"]`);
+        this.resizing = {
+            col,
+            startX: event.clientX,
+            startWidth: header?.getBoundingClientRect().width ?? Number.NaN
+        };
+    }
+    onHeaderMouseDown(event, col) {
+        if (event.button !== 0 || !this.reorderableColumns()) {
+            return;
+        }
+        event.preventDefault();
+        this.movingColumn.set(col);
+        this.moveTargetColumn.set(col);
+    }
+    onHeaderMouseEnter(col) {
+        if (this.movingColumn() !== null) {
+            this.moveTargetColumn.set(col);
+        }
+    }
+    /** Runs for every pointer move while something is being dragged, and only then. */
+    onPointerMove(event) {
+        const resizing = this.resizing;
+        if (!resizing) {
+            return;
+        }
+        const width = resolveColumnWidth(resizing.startWidth, event.clientX - resizing.startX, this.minColumnWidth());
+        if (width === null) {
+            return;
+        }
+        const key = this.columns()[resizing.col]?.key;
+        if (key) {
+            this.columnWidths.update((widths) => ({ ...widths, [key]: width }));
+        }
+    }
+    endDrag() {
+        this.dragging = false;
+        this.resizing = null;
+        this.commitColumnMove();
+        if (this.fillSource()) {
+            this.commitFill();
+        }
+    }
+    onContextMenu(event, row, col) {
+        if (!this.contextMenu()) {
+            return;
+        }
+        // A right-click on a cell outside the selection moves the cursor there first, as a
+        // spreadsheet does: acting on cells the reader cannot see selected is how rows get
+        // deleted that should not have been.
+        if (!this.isSelected(row, col)) {
+            this.moveTo({ row, col }, false);
+        }
+        if (!this.menuEntries().length) {
+            return;
+        }
+        event.preventDefault();
+        const host = this.#host.nativeElement.getBoundingClientRect();
+        this.menuAt.set({ x: event.clientX - host.left, y: event.clientY - host.top });
+    }
+    closeMenu() {
+        this.menuAt.set(null);
+    }
+    /**
+     * What the menu offers here, already filtered by what is allowed.
+     *
+     * Built rather than rendered-and-hidden so the menu is never opened empty, and so no entry
+     * appears that would do nothing when clicked.
+     */
+    menuEntries = computed(() => {
+        const range = this.range();
+        if (!range || this.readonly()) {
+            return [];
+        }
+        const rows = this.rows();
+        const columns = this.columns();
+        const structure = this.structure();
+        const entries = [];
+        const rowCount = range.bottom - range.top + 1;
+        const colCount = range.right - range.left + 1;
+        if (isStructureAllowed(structure.insertRows, rows[range.top] ?? null, range.top)) {
+            entries.push({ id: 'row-before', label: 'INSERT_ROW_ABOVE', count: 1 });
+            entries.push({ id: 'row-after', label: 'INSERT_ROW_BELOW', count: 1 });
+        }
+        if (this.allRows(range, (row, index) => isStructureAllowed(structure.deleteRows, row, index))) {
+            entries.push({ id: 'row-delete', label: 'DELETE_ROWS', count: rowCount });
+        }
+        if (isStructureAllowed(structure.insertColumns, columns[range.left] ?? null, range.left)) {
+            entries.push({ id: 'col-before', label: 'INSERT_COLUMN_BEFORE', count: 1 });
+            entries.push({ id: 'col-after', label: 'INSERT_COLUMN_AFTER', count: 1 });
+        }
+        if (this.allColumns(range, (column, index) => isStructureAllowed(structure.deleteColumns, column, index))) {
+            entries.push({ id: 'col-delete', label: 'DELETE_COLUMNS', count: colCount });
+        }
+        if (this.mergeable()) {
+            // The selection has already grown to contain whole blocks, so what it asks for is one
+            // rectangle and the arithmetic has nothing left to guess.
+            if (mergeRequestFor(this.spans(), range)) {
+                entries.push({ id: 'merge', label: 'MERGE_CELLS', count: rowCount * colCount });
+            }
+            const touched = spansWithin(this.spans(), range);
+            if (touched.length) {
+                entries.push({ id: 'unmerge', label: 'UNMERGE_CELLS', count: touched.length });
+            }
+        }
+        return entries;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuEntries" }] : /* istanbul ignore next */ []));
+    runMenuEntry(id) {
+        this.closeMenu();
+        switch (id) {
+            case 'row-before':
+                this.requestInsertRow('before');
+                break;
+            case 'row-after':
+                this.requestInsertRow('after');
+                break;
+            case 'row-delete':
+                this.requestDeleteRows();
+                break;
+            case 'col-before':
+                this.requestInsertColumn('before');
+                break;
+            case 'col-after':
+                this.requestInsertColumn('after');
+                break;
+            case 'col-delete':
+                this.requestDeleteColumns();
+                break;
+            case 'merge':
+                this.requestMerge();
+                break;
+            case 'unmerge':
+                this.requestUnmerge();
+                break;
+        }
+    }
+    /** Reports the block the selection would become, with what it swallows. */
+    requestMerge() {
+        const range = this.range();
+        const request = range && mergeRequestFor(this.spans(), range);
+        if (request) {
+            this.mergeRequested.emit(request);
+        }
+    }
+    /** Reports the blocks the selection touches, so the host can take them apart. */
+    requestUnmerge() {
+        const range = this.range();
+        if (!range) {
+            return;
+        }
+        const anchors = spansWithin(this.spans(), range).map((span) => ({ row: span.row, col: span.col }));
+        if (anchors.length) {
+            this.unmergeRequested.emit(anchors);
+        }
+    }
+    allRows(range, allowed) {
+        const rows = this.rows();
+        for (let index = range.top; index <= range.bottom; index++) {
+            if (!allowed(rows[index], index)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    allColumns(range, allowed) {
+        const columns = this.columns();
+        for (let index = range.left; index <= range.right; index++) {
+            if (!allowed(columns[index], index)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Reads the viewport after it has scrolled, or been resized, or drawn its first rows.
+     *
+     * Signals rather than a stored geometry, so the window is a computed like everything else and
+     * nothing has to remember to recompute it. The row height is measured from the first row in
+     * the document, which is also the only row that is certainly there.
+     */
+    onViewportScroll() {
+        const viewport = this.viewport()?.nativeElement;
+        if (!viewport) {
+            return;
+        }
+        this.scrollTop.set(viewport.scrollTop);
+        this.viewportHeight.set(viewport.clientHeight);
+        this.scrollLeft.set(viewport.scrollLeft);
+        this.viewportWidth.set(viewport.clientWidth);
+        if (!this.rowHeight()) {
+            const row = viewport.querySelector('.hub-spreadsheet__row');
+            const height = row?.getBoundingClientRect().height ?? 0;
+            // A row of nought is a sheet that has not been laid out — a closed tab, a hidden
+            // panel. Keeping the last good measurement is better than throwing the window away.
+            if (height > 0) {
+                this.measuredRowHeight.set(height);
+            }
+        }
+    }
+    /** Reports where a dragged column was dropped, if it moved at all. */
+    commitColumnMove() {
+        const from = this.movingColumn();
+        const to = this.moveTargetColumn();
+        this.movingColumn.set(null);
+        this.moveTargetColumn.set(null);
+        if (from === null || to === null || from === to) {
+            return;
+        }
+        const keys = this.columns().map((column) => column.key);
+        this.columnMoved.emit({ from, to, key: keys[from], keys: moveColumn(keys, from, to) });
+    }
+    /** Whether a header is the one being dragged, or the place it would land. */
+    isMovingColumn(col) {
+        return this.movingColumn() === col;
+    }
+    isMoveTarget(col) {
+        return this.movingColumn() !== null && this.moveTargetColumn() === col && this.movingColumn() !== col;
+    }
+    /** Whether the fill handle belongs on this cell: the far corner of the selection. */
+    hasFillHandle(row, col) {
+        const range = this.range();
+        return this.fillHandle() && !this.readonly() && !!range && row === range.bottom && col === range.right;
+    }
+    /** Whether a cell is inside the area a released fill would write to. */
+    isFillPreview(row, col) {
+        const target = this.fillTarget();
+        return !!target && isWithinGridRange({ row, col }, target) && !isWithinGridRange({ row, col }, this.range());
+    }
+    onFillHandleDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        // Stops the cell underneath from treating this as the start of a new selection.
+        event.preventDefault();
+        event.stopPropagation();
+        const range = this.range();
+        if (range) {
+            this.fillSource.set(range);
+            this.fillTarget.set(range);
+        }
+    }
+    /** Grows the preview towards wherever the pointer went, on one axis only. */
+    trackFill(row, col) {
+        const source = this.fillSource();
+        if (!source) {
+            return;
+        }
+        const down = Math.max(0, row - source.bottom);
+        const right = Math.max(0, col - source.right);
+        // One axis at a time, as a spreadsheet does: a diagonal drag would have to invent a rule
+        // for the corner it opens up, and any rule there surprises somebody.
+        this.fillTarget.set(down >= right
+            ? { ...source, bottom: Math.max(source.bottom, row) }
+            : { ...source, right: Math.max(source.right, col) });
+    }
+    /** Works out what the finished drag writes, reports it, and leaves the selection covering it. */
+    commitFill() {
+        const source = this.fillSource();
+        const target = this.fillTarget();
+        this.fillSource.set(null);
+        this.fillTarget.set(null);
+        if (!source || !target) {
+            return;
+        }
+        const grid = this.grid();
+        const rows = this.rows();
+        const columns = this.columns();
+        const cells = [];
+        let skipped = 0;
+        const down = target.bottom - source.bottom;
+        const across = target.right - source.right;
+        const write = (row, col, value) => {
+            const cell = grid[row]?.[col];
+            if (!cell?.editable) {
+                skipped++;
+                return;
+            }
+            if (value !== cell.value) {
+                cells.push({ coords: { row, col }, row: rows[row], column: columns[col], cell, value });
+            }
+        };
+        if (down > 0) {
+            for (let col = source.left; col <= source.right; col++) {
+                const seed = [];
+                for (let row = source.top; row <= source.bottom; row++) {
+                    seed.push(grid[row][col].value);
+                }
+                fillValues(seed, down).forEach((value, offset) => write(source.bottom + 1 + offset, col, value));
+            }
+        }
+        else if (across > 0) {
+            for (let row = source.top; row <= source.bottom; row++) {
+                const seed = [];
+                for (let col = source.left; col <= source.right; col++) {
+                    seed.push(grid[row][col].value);
+                }
+                fillValues(seed, across).forEach((value, offset) => write(row, source.right + 1 + offset, value));
+            }
+        }
+        else {
+            return;
+        }
+        this.anchor.set({ row: target.top, col: target.left });
+        this.active.set({ row: target.bottom, col: target.right });
+        this.filled.emit({ cells, range: target, skipped, rejected: 0 });
+        this.announceSelection();
+    }
+    /**
+     * Opens the cell from its own mark, on the first click.
+     *
+     * The mark exists to be pressed, so it does not wait for a second click the way the rest of the
+     * cell does — which is what a spreadsheet does with the list of a cell that has one. The press
+     * is swallowed rather than let through: the cell underneath would otherwise start a range drag,
+     * and the release would land on an editor that was not there when the press began.
+     */
+    onAffordanceDown(event, row, col) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.moveTo({ row, col }, false);
+        this.startEdit(undefined);
+    }
+    onDoubleClick() {
+        this.startEdit(undefined);
+    }
+    onCopy(event, cut) {
+        const range = this.range();
+        if (!range || this.editing() || !event.clipboardData) {
+            return;
+        }
+        const grid = this.grid();
+        const values = [];
+        for (let row = range.top; row <= range.bottom; row++) {
+            const line = [];
+            for (let col = range.left; col <= range.right; col++) {
+                line.push(grid[row][col].value);
+            }
+            values.push(line);
+        }
+        const { text, html } = serialiseClipboardTable(values);
+        event.clipboardData.setData('text/plain', text);
+        event.clipboardData.setData('text/html', html);
+        event.preventDefault();
+        if (cut) {
+            this.announceCleared();
+        }
+    }
+    onPaste(event) {
+        const active = this.active();
+        if (!active || this.editing() || !event.clipboardData) {
+            return;
+        }
+        event.preventDefault();
+        const block = parseClipboardTable({
+            text: event.clipboardData.getData('text/plain'),
+            html: event.clipboardData.getData('text/html')
+        });
+        this.focusActive();
+        if (!block.length) {
+            return;
+        }
+        this.applyPaste(active, block);
+    }
+    /** Asks the owner to add a row beside the cursor, if it allows it. */
+    requestInsertRow(side) {
+        const active = this.active();
+        const rows = this.rows();
+        const subject = active ? (rows[active.row] ?? null) : null;
+        if (!isStructureAllowed(this.structure().insertRows, subject, active?.row ?? 0)) {
+            return;
+        }
+        this.insertRequested.emit({
+            axis: 'row',
+            at: resolveInsertIndex(active?.row ?? rows.length, side, rows.length),
+            count: 1
+        });
+    }
+    /** Asks the owner to remove the rows the selection covers, if it allows it. */
+    requestDeleteRows() {
+        const range = this.range();
+        const rows = this.rows();
+        if (!range) {
+            return;
+        }
+        for (let row = range.top; row <= range.bottom; row++) {
+            if (!isStructureAllowed(this.structure().deleteRows, rows[row], row)) {
+                return;
+            }
+        }
+        this.deleteRequested.emit({ axis: 'row', at: range.top, count: range.bottom - range.top + 1 });
+    }
+    /** Asks the owner to add a column, handing over an alias that has never been used here. */
+    requestInsertColumn(side) {
+        const active = this.active();
+        const columns = this.columns();
+        const subject = active ? (columns[active.col] ?? null) : null;
+        if (!isStructureAllowed(this.structure().insertColumns, subject, active?.col ?? 0)) {
+            return;
+        }
+        this.insertRequested.emit({
+            axis: 'column',
+            at: resolveInsertIndex(active?.col ?? columns.length, side, columns.length),
+            count: 1,
+            key: nextColumnKey([...columns.map((column) => column.key), ...this.retiredColumnKeys()])
+        });
+    }
+    /** Asks the owner to remove the columns the selection covers, naming the aliases at stake. */
+    requestDeleteColumns() {
+        const range = this.range();
+        const columns = this.columns();
+        if (!range) {
+            return;
+        }
+        for (let col = range.left; col <= range.right; col++) {
+            if (!isStructureAllowed(this.structure().deleteColumns, columns[col], col)) {
+                return;
+            }
+        }
+        this.deleteRequested.emit({
+            axis: 'column',
+            at: range.left,
+            count: range.right - range.left + 1,
+            keys: columns.slice(range.left, range.right + 1).map((column) => column.key)
+        });
+    }
+    onDraftInput(event) {
+        // A keystroke changes what is being offered, so whatever was highlighted is no longer the
+        // thing the reader was looking at.
+        this.suggestionAt.set(-1);
+        this.draft.set(event.target.value);
+        this.invalid.set(false);
+    }
+    onEditorKeydown(event) {
+        // A composition is in flight: the Enter that picks a candidate is not the Enter that
+        // commits the cell.
+        if (event.isComposing || event.keyCode === 229) {
+            return;
+        }
+        if (this.onSuggestionKeydown(event)) {
+            return;
+        }
+        switch (event.key) {
+            // Stopped as well as prevented, all three of them. The editor sits inside the grid, so
+            // the same keystroke reaches the grid's own handler a moment later — and there it
+            // reads as a fresh Enter on the cell below, which opened an editor the reader never
+            // asked for on every single commit.
+            case 'Enter':
+                event.preventDefault();
+                event.stopPropagation();
+                this.finishEdit({ row: event.shiftKey ? -1 : 1, col: 0 });
+                break;
+            case 'Tab':
+                event.preventDefault();
+                event.stopPropagation();
+                this.finishEdit({ row: 0, col: event.shiftKey ? -1 : 1 });
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.cancelEdit();
+                break;
+        }
+    }
+    /**
+     * The list of suggestions takes the arrows, and takes Enter only once the reader is in it.
+     *
+     * Enter is the awkward one: it both accepts a suggestion and commits a cell, and which of the
+     * two it means depends on whether the reader has moved into the list. Moving into it is
+     * deliberate — an arrow key — so somebody who types a whole formula and presses Enter commits
+     * it, which is what they meant.
+     *
+     * @returns Whether the key was the list's, and the editor should leave it alone.
+     */
+    onSuggestionKeydown(event) {
+        const suggestions = this.suggestions();
+        if (!suggestions.length) {
+            return false;
+        }
+        const index = this.suggestionIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                this.suggestionAt.set((index + 1) % suggestions.length);
+                return true;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                this.suggestionAt.set(index <= 0 ? suggestions.length - 1 : index - 1);
+                return true;
+            case 'Tab':
+            case 'Enter':
+                if (index < 0) {
+                    return false;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                this.useSuggestion(suggestions[index]);
+                return true;
+            case 'Escape':
+                // Out of the list, not out of the cell: a reader dismissing a list of suggestions
+                // has not asked to throw away what they were writing.
+                if (index >= 0) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.suggestionAt.set(-1);
+                    return true;
+                }
+                return false;
+        }
+        return false;
+    }
+    /** Leaving the editor keeps what was typed, as clicking away does in a spreadsheet. */
+    onEditorBlur() {
+        if (this.editing() && !this.finishEdit(null)) {
+            this.cancelEdit();
+        }
+    }
+    trackRow = (index) => this.keys()[index] ?? String(index);
+    trackColumn = (_index, column) => column.key;
+    /** Writes a pasted block into the sheet and reports what fitted and what did not. */
+    applyPaste(at, block) {
+        const rows = this.rows();
+        const columns = this.columns();
+        const grid = this.grid();
+        const cells = [];
+        let skipped = 0;
+        let rejected = 0;
+        block.forEach((line, rowOffset) => line.forEach((incoming, colOffset) => {
+            const row = at.row + rowOffset;
+            const col = at.col + colOffset;
+            const cell = grid[row]?.[col];
+            if (!cell?.editable || this.readonly()) {
+                skipped++;
+                return;
+            }
+            const column = columns[col];
+            const value = this.read(incoming, column);
+            if (value === undefined) {
+                rejected++;
+                return;
+            }
+            if (value !== cell.value) {
+                cells.push({ coords: { row, col }, row: rows[row], column, cell, value });
+            }
+        }));
+        const height = block.length;
+        const width = Math.max(...block.map((line) => line.length));
+        const range = clampGridRange({ top: at.row, bottom: at.row + height - 1, left: at.col, right: at.col + width - 1 }, this.bounds());
+        this.anchor.set(at);
+        this.active.set({
+            row: Math.min(this.bounds().rows - 1, at.row + height - 1),
+            col: Math.min(this.bounds().cols - 1, at.col + width - 1)
+        });
+        this.pasted.emit({
+            cells,
+            range: range ?? { top: at.row, bottom: at.row, left: at.col, right: at.col },
+            skipped,
+            rejected
+        });
+        this.announceSelection();
+    }
+    /**
+     * What a pasted cell is worth in this column.
+     *
+     * The raw number from the HTML flavour wins where there is one, because it does not depend on
+     * how the source happened to format it. Only when it is absent is the displayed text parsed,
+     * and then in this reader's own convention.
+     */
+    read(incoming, column) {
+        const kind = column.kind ?? 'text';
+        // A formula is kept as what it is, whatever the column holds. Read as a figure it is not
+        // one — `=2*4` is not a number — and the cell refused the very thing it exists to accept:
+        // a column of currency is exactly where somebody writes a formula.
+        if (this.formulas() && isFormula(incoming.text)) {
+            return incoming.text;
+        }
+        // The raw number from the HTML flavour wins for a figure column, because it does not
+        // depend on how the source happened to format it. For every other kind the text is what
+        // carries the meaning.
+        if (incoming.raw !== undefined && (kind === 'number' || kind === 'currency')) {
+            return incoming.raw;
+        }
+        return parseForColumn(incoming.text, column, this.decimalMark());
+    }
+    startEdit(seed) {
+        const active = this.active();
+        if (!active || !this.canEdit(active.row, active.col)) {
+            return;
+        }
+        // A yes/no column has nothing to type into. Opening a field over it would show the stored
+        // 0 or 1 as text and ask the reader to edit a number that is not what the column means.
+        if (this.columns()[active.col].kind === 'boolean') {
+            this.toggleBoolean(active.row, active.col);
+            return;
+        }
+        const cell = this.grid()[active.row][active.col];
+        const column = this.columns()[active.col];
+        const kind = column.kind ?? 'text';
+        // The character that opened the cell is the reader's first keystroke, and it has to land
+        // somewhere. In a list it picks the first answer that starts with it, as a native list
+        // does when you type at it; in a date field it lands nowhere, because a letter is not a
+        // date and keeping it would commit rubbish on the way out.
+        const opener = kind === 'select' ? this.optionStartingWith(column, seed) : undefined;
+        this.anchor.set(null);
+        this.seed.set(seed);
+        this.draft.set(this.openingText(cell, kind, seed, opener));
+        this.invalid.set(false);
+        this.editing.set(true);
+        afterNextRender(() => {
+            const editor = this.#host.nativeElement.querySelector('.hub-spreadsheet__editor');
+            if (!editor) {
+                // A supplied editor draws whatever it likes, so the most the sheet can do is put
+                // the keyboard inside it and let it take over from there.
+                this.focusSuppliedEditor();
+                return;
+            }
+            editor.focus();
+            // Opened with Enter or F2 the value is kept and selected; opened by typing, the caret
+            // sits after the character that opened it. Only a text field has a selection to
+            // place — a list has no such method and a date field refuses.
+            if (seed === undefined && editor instanceof HTMLInputElement && editor.type === 'text') {
+                editor.select();
+            }
+            // One gesture for one decision: the list and the calendar come up with the cell
+            // instead of waiting for a second click. Not when the cell was opened by typing
+            // into it, though — a calendar over a half-written date takes the keystrokes that
+            // were meant to finish it.
+            if (seed === undefined && (kind === 'select' || kind === 'date')) {
+                revealPicker(editor);
+            }
+        }, { injector: this.#injector });
+    }
+    /** Puts the keyboard in the first thing a supplied editor offers it. */
+    focusSuppliedEditor() {
+        this.#host.nativeElement
+            .querySelector('.hub-spreadsheet__custom-editor :is(input, select, textarea, button, [tabindex]:not([tabindex="-1"]))')
+            ?.focus();
+    }
+    /**
+     * Keeps the characters typed between opening a cell and the editor getting the focus.
+     *
+     * The field does not exist until the view has been drawn, so the focus can only move to it on
+     * the render after the keystroke that opened the cell. Anybody typing quickly — `8`, `0`, `0`
+     * inside one frame — has the first character open the cell and the rest arrive here, at the
+     * grid, with nowhere to go. They used to be dropped: the cell opened on `8` and committed `8`.
+     *
+     * So they are added to the draft, which is what the field shows the moment it appears.
+     */
+    catchUp(event) {
+        if (event.isComposing || event.keyCode === 229 || event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        if (event.key.length !== 1) {
+            return;
+        }
+        const editor = this.#host.nativeElement.querySelector('.hub-spreadsheet__editor');
+        // Only for a key that did not come from the field itself. Once the field has the focus its
+        // keystrokes bubble up here too, and adding those to the draft would type everything
+        // twice. Read off the event rather than off `document.activeElement`, which is the same
+        // question asked of something that lies about it in tests.
+        if (editor && event.target === editor) {
+            return;
+        }
+        event.preventDefault();
+        this.draft.update((draft) => draft + event.key);
+        if (editor instanceof HTMLInputElement) {
+            editor.value = this.draft();
+        }
+    }
+    /**
+     * Reads what was typed, reports it if it changed, then moves by `step`.
+     *
+     * @returns false when the text is not a value for this column, leaving the editor open and
+     *          marked rather than throwing away what the reader wrote.
+     */
+    finishEdit(step) {
+        const active = this.active();
+        if (!active) {
+            return true;
+        }
+        const column = this.columns()[active.col];
+        const cell = this.grid()[active.row][active.col];
+        const value = this.read({ text: this.draft() }, column);
+        if (value === undefined) {
+            this.invalid.set(true);
+            return false;
+        }
+        this.editing.set(false);
+        this.invalid.set(false);
+        if (value !== cell.value) {
+            this.commit.emit({ coords: active, row: this.rows()[active.row], column, cell, value });
+        }
+        if (step) {
+            this.moveTo(moveGridFocus(active, step, this.bounds(), { horizontal: 'continuous' }), false);
+        }
+        else {
+            this.focusActive();
+        }
+        return true;
+    }
+    cancelEdit() {
+        this.editing.set(false);
+        this.invalid.set(false);
+        this.focusActive();
+    }
+    /**
+     * The first answer of a list that starts with what was typed, skipping the ones a reader is
+     * not allowed to choose. Matched on the label, because that is what they were reading.
+     */
+    optionStartingWith(column, seed) {
+        if (seed === undefined || seed === '') {
+            return undefined;
+        }
+        const start = seed.toLocaleLowerCase();
+        return column.options?.find((option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(start));
+    }
+    /** What the editor starts with, which is not always what was typed. */
+    openingText(cell, kind, seed, opener) {
+        if (seed === undefined) {
+            return this.editableTextOf(cell);
+        }
+        if (kind === 'select') {
+            // The label, which is what a list is read back from; an unmatched character leaves the
+            // cell as it was rather than emptying it.
+            return opener ? opener.label : this.editableTextOf(cell);
+        }
+        // A date field cannot hold half a date, and a letter left in the draft would be committed
+        // as one the moment the reader clicked away.
+        return kind === 'date' ? '' : seed;
+    }
+    /** A value as it goes into the editor: numbers in this reader's own convention. */
+    editableTextOf(cell) {
+        if (cell.value === null) {
+            return '';
+        }
+        return typeof cell.value === 'number' ? String(cell.value).replace('.', this.decimalMark()) : String(cell.value);
+    }
+    moveTo(rawTarget, extend) {
+        // Arithmetic runs on plain coordinates; landing on a covered cell then resolves to the
+        // block that owns it, so the cursor is never on something that is not drawn.
+        const target = anchorOf(this.spanMap(), rawTarget);
+        if (extend) {
+            this.anchor.set(this.anchor() ?? this.active());
+        }
+        else {
+            this.anchor.set(null);
+        }
+        this.active.set(target);
+        this.announceSelection();
+        this.focusActive();
+    }
+    selectRange(range) {
+        this.anchor.set({ row: range.top, col: range.left });
+        this.active.set({ row: range.bottom, col: range.right });
+        this.announceSelection();
+        this.focusActive();
+    }
+    focusActive() {
+        // While virtualising, the cell the cursor has just moved to may not be in the document at
+        // all — that is the whole point of virtualising — so the scroller is moved first and the
+        // focus follows on the render that puts the row there.
+        this.scrollRowIntoView();
+        afterNextRender(() => {
+            const active = this.active();
+            if (active) {
+                this.#host.nativeElement
+                    .querySelector(`[data-cell="${active.row}-${active.col}"]`)
+                    ?.focus({ preventScroll: false });
+            }
+        }, { injector: this.#injector });
+    }
+    /**
+     * Brings the row the cursor is on inside the viewport, when the sheet is the thing that
+     * scrolls and the row might not be drawn.
+     *
+     * Only the arithmetic the browser cannot do for us: `scrollIntoView` needs an element, and a
+     * row that is not in the document has none. The offset is worked out from the row height,
+     * which virtualising already depends on, and the scroller is nudged by the least that brings
+     * the row in — jumping it to the middle would move the sheet under a reader who only pressed
+     * the down arrow.
+     */
+    scrollRowIntoView() {
+        const active = this.active();
+        const viewport = this.viewport()?.nativeElement;
+        const size = this.rowHeight() || this.measuredRowHeight();
+        if (!active || !viewport || !this.virtual() || size <= 0) {
+            return;
+        }
+        const frozen = Math.min(this.frozenRows(), this.rows().length);
+        // A frozen row is pinned, so it is on screen wherever the reader has got to — but landing
+        // on one means going back to the top of the sheet, and leaving the view where it was makes
+        // the cursor look lost.
+        if (active.row < frozen) {
+            viewport.scrollTop = 0;
+            this.scrollColumnIntoView(viewport, active.col);
+            return;
+        }
+        const top = (active.row - frozen) * size;
+        const bottom = top + size;
+        const visibleTop = viewport.scrollTop;
+        const visibleBottom = visibleTop + viewport.clientHeight;
+        if (top < visibleTop) {
+            viewport.scrollTop = top;
+        }
+        else if (bottom > visibleBottom) {
+            viewport.scrollTop = bottom - viewport.clientHeight;
+        }
+        this.scrollColumnIntoView(viewport, active.col);
+    }
+    /**
+     * The same for the column the cursor is on, which may be out of the document sideways.
+     *
+     * Measured widths rather than a single size: columns are rarely alike, and adding up the ones
+     * before the cursor is the only way to know where it starts. Nothing to do when a width is
+     * missing, which is also when the sheet is drawing every column anyway.
+     */
+    scrollColumnIntoView(viewport, col) {
+        const widths = this.measuredColumnWidths();
+        const frozen = Math.min(this.frozenColumns(), this.columns().length);
+        if (widths.length !== this.columns().length || widths.some((width) => !(width > 0))) {
+            return;
+        }
+        // Same for a frozen column: pinned, so visible, but `Home` means the beginning of the row
+        // and the sheet has to come back with the cursor.
+        if (col < frozen) {
+            viewport.scrollLeft = 0;
+            return;
+        }
+        let start = 0;
+        for (let index = frozen; index < col; index++) {
+            start += widths[index];
+        }
+        const end = start + widths[col];
+        const visibleStart = viewport.scrollLeft;
+        const visibleEnd = visibleStart + viewport.clientWidth;
+        if (start < visibleStart) {
+            viewport.scrollLeft = start;
+        }
+        else if (end > visibleEnd) {
+            viewport.scrollLeft = end - viewport.clientWidth;
+        }
+    }
+    /** Hands focus to the off-screen field so the browser will dispatch a paste at all. */
+    focusSink() {
+        this.#host.nativeElement.querySelector('.hub-spreadsheet__sink')?.focus({
+            preventScroll: true
+        });
+    }
+    refAt(coords) {
+        return {
+            coords,
+            row: this.rows()[coords.row],
+            column: this.columns()[coords.col],
+            cell: this.grid()[coords.row][coords.col]
+        };
+    }
+    announceSelection() {
+        this.selectionChange.emit(this.range());
+    }
+    announceCleared() {
+        const range = this.range();
+        if (!range || this.readonly()) {
+            return;
+        }
+        const cells = gridRangeCells(range)
+            .filter(({ row, col }) => this.canEdit(row, col) && this.grid()[row][col].value !== null)
+            .map((coords) => this.refAt(coords));
+        if (cells.length) {
+            this.cleared.emit(cells);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSpreadsheetComponent, isStandalone: true, selector: "hub-spreadsheet", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, states: { classPropertyName: "states", publicName: "states", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, decimalMark: { classPropertyName: "decimalMark", publicName: "decimalMark", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, frozenColumns: { classPropertyName: "frozenColumns", publicName: "frozenColumns", isSignal: true, isRequired: false, transformFunction: null }, frozenRows: { classPropertyName: "frozenRows", publicName: "frozenRows", isSignal: true, isRequired: false, transformFunction: null }, spans: { classPropertyName: "spans", publicName: "spans", isSignal: true, isRequired: false, transformFunction: null }, structure: { classPropertyName: "structure", publicName: "structure", isSignal: true, isRequired: false, transformFunction: null }, retiredColumnKeys: { classPropertyName: "retiredColumnKeys", publicName: "retiredColumnKeys", isSignal: true, isRequired: false, transformFunction: null }, fillHandle: { classPropertyName: "fillHandle", publicName: "fillHandle", isSignal: true, isRequired: false, transformFunction: null }, canUndo: { classPropertyName: "canUndo", publicName: "canUndo", isSignal: true, isRequired: false, transformFunction: null }, canRedo: { classPropertyName: "canRedo", publicName: "canRedo", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, mergeable: { classPropertyName: "mergeable", publicName: "mergeable", isSignal: true, isRequired: false, transformFunction: null }, formulas: { classPropertyName: "formulas", publicName: "formulas", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, editOn: { classPropertyName: "editOn", publicName: "editOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnWidths: "columnWidthsChange", commit: "commit", pasted: "pasted", cleared: "cleared", selectionChange: "selectionChange", insertRequested: "insertRequested", deleteRequested: "deleteRequested", filled: "filled", undoRequested: "undoRequested", redoRequested: "redoRequested", columnMoved: "columnMoved", mergeRequested: "mergeRequested", unmergeRequested: "unmergeRequested" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "document:mouseup": "endDrag()", "document:mousemove": "onPointerMove($event)", "document:mousedown": "closeMenu()", "document:keydown.escape": "closeMenu()" }, properties: { "class.hub-spreadsheet--readonly": "readonly()", "class.hub-spreadsheet--editing": "editing()", "class.hub-spreadsheet--virtual": "virtual()" }, classAttribute: "hub-spreadsheet" }, providers: [{ provide: HUB_TRANSLATION_PREFIX, useValue: 'HUBUI.SPREADSHEET' }], queries: [{ propertyName: "customEditors", predicate: HubSpreadsheetEditorDirective, isSignal: true }, { propertyName: "customCells", predicate: HubSpreadsheetCellDirective, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n\tThe off-screen field exists for one reason: a browser only dispatches `paste` to something\n\teditable. The paste shortcut parks the focus here for the length of the event and the cell\n\ttakes it straight back, so the reader never notices and the grid keeps its own focus model.\n-->\n<textarea class=\"hub-spreadsheet__sink\" tabindex=\"-1\" aria-hidden=\"true\" readonly (paste)=\"onPaste($event)\"></textarea>\n\n<div class=\"hub-spreadsheet__viewport\" #viewport (scroll)=\"onViewportScroll()\">\n\t<table\n\t\tclass=\"hub-spreadsheet__table\"\n\t\trole=\"grid\"\n\t\t[attr.aria-rowcount]=\"bounds().rows\"\n\t\t[attr.aria-colcount]=\"bounds().cols\"\n\t\t[attr.aria-readonly]=\"readonly() || null\"\n\t\t(keydown)=\"onKeydown($event)\"\n\t\t(copy)=\"onCopy($event, false)\"\n\t\t(cut)=\"onCopy($event, true)\"\n\t>\n\t\t<thead class=\"hub-spreadsheet__head\">\n\t\t\t<tr role=\"row\">\n\t\t\t\t<!-- Holds the width of the columns that are not drawn, so the sheet is as wide as it\n\t\t\t\tsays it is and the ones that are drawn land where they belong. -->\n\t\t\t\t@if (columnWindow().before > 0) {\n\t\t\t\t\t<!-- A minimum, not a width: in a table that shares its space out, a width is a\n\t\t\t\t\tsuggestion the algorithm is free to ignore, and an empty cell asked for three\n\t\t\t\t\tthousand pixels came out two wide. -->\n\t\t\t\t\t<th\n\t\t\t\t\t\tclass=\"hub-spreadsheet__spacer\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t[style.min-inline-size.px]=\"columnWindow().before\"\n\t\t\t\t\t\t[style.inline-size.px]=\"columnWindow().before\"\n\t\t\t\t\t></th>\n\t\t\t\t}\n\n\t\t\t\t@for (columnIndex of drawnColumns(); track trackColumn(columnIndex, columns()[columnIndex])) {\n\t\t\t\t\t@let column = columns()[columnIndex];\n\t\t\t\t\t<th\n\t\t\t\t\t\tclass=\"hub-spreadsheet__header\"\n\t\t\t\t\t\trole=\"columnheader\"\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--frozen]=\"isFrozenColumn(columnIndex)\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--frozen-edge]=\"isColumnEdge(columnIndex)\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--end]=\"column.align === 'end'\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--center]=\"column.align === 'center'\"\n\t\t\t\t\t\t[style.inset-inline-start.px]=\"columnOffsetOf(columnIndex)\"\n\t\t\t\t\t\t[style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t[style.width.px]=\"widthOf(columnIndex)\"\n\t\t\t\t\t\t[attr.data-header]=\"columnIndex\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--end-of-sheet]=\"columnIndex === bounds().cols - 1\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--moving]=\"isMovingColumn(columnIndex)\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--move-target]=\"isMoveTarget(columnIndex)\"\n\t\t\t\t\t\t(mousedown)=\"onHeaderMouseDown($event, columnIndex)\"\n\t\t\t\t\t\t(mouseenter)=\"onHeaderMouseEnter(columnIndex)\"\n\t\t\t\t\t\t[attr.aria-colindex]=\"columnIndex + 1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span [class.hub-spreadsheet__header-text--hidden]=\"column.headerHidden\">\n\t\t\t\t\t\t\t{{ column.header }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<!-- The name a formula calls this column, which is not the name on the header.\n\t\t\t\t\tShown only while one is being written, and clickable, because the alternative is\n\t\t\t\t\tknowing it by heart. -->\n\t\t\t\t\t\t@if (writingFormula()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__alias\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t(mousedown)=\"\n\t\t\t\t\t\t\t\t\t$event.preventDefault();\n\t\t\t\t\t\t\t\t\tuseSuggestion({ label: column.key, kind: 'column', insert: '[' + column.key + ']' })\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__alias-letter\">{{ columnLetter(columnIndex) }}</span>\n\t\t\t\t\t\t\t\t{{ column.key }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (column.subheader) {\n\t\t\t\t\t\t\t<small class=\"hub-spreadsheet__subheader\">{{ column.subheader }}</small>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (resizableColumns()) {\n\t\t\t\t\t\t\t<!-- Sits inside the header's trailing edge. Hidden from assistive technology:\n\t\t\t\t\t\t\ta width is a matter of taste, and a screen reader has no use for a drag\n\t\t\t\t\t\t\ttarget it cannot aim at. -->\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__resize-grip\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onResizeStart($event, columnIndex)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\n\t\t\t\t@if (columnWindow().after > 0) {\n\t\t\t\t\t<th\n\t\t\t\t\t\tclass=\"hub-spreadsheet__spacer\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t[style.min-inline-size.px]=\"columnWindow().after\"\n\t\t\t\t\t\t[style.inline-size.px]=\"columnWindow().after\"\n\t\t\t\t\t></th>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</thead>\n\n\t\t<tbody class=\"hub-spreadsheet__body\">\n\t\t\t<!-- The rows above the window are not in the document; this holds their height, so the\n\t\t\tscrollbar still says how long the sheet is and the rows that are drawn land where they\n\t\t\tbelong. Hidden from assistive technology, which reads `aria-rowindex` instead. -->\n\t\t\t@if (rowWindow().before > 0) {\n\t\t\t\t<tr class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\">\n\t\t\t\t\t<td [attr.colspan]=\"drawnCellCount()\" [style.block-size.px]=\"rowWindow().before\"></td>\n\t\t\t\t</tr>\n\t\t\t}\n\n\t\t\t@for (rowIndex of drawnRows(); track trackRow(rowIndex)) {\n\t\t\t\t<tr\n\t\t\t\t\tclass=\"hub-spreadsheet__row\"\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\t[class.hub-spreadsheet__row--frozen]=\"isFrozenRow(rowIndex)\"\n\t\t\t\t\t[class.hub-spreadsheet__row--frozen-edge]=\"isRowEdge(rowIndex)\"\n\t\t\t\t\t[attr.aria-rowindex]=\"rowIndex + 1\"\n\t\t\t\t>\n\t\t\t\t\t@if (columnWindow().before > 0) {\n\t\t\t\t\t\t<td class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\"></td>\n\t\t\t\t\t}\n\n\t\t\t\t\t@for (colIndex of drawnColumns(); track trackColumn(colIndex, columns()[colIndex])) {\n\t\t\t\t\t\t@let column = columns()[colIndex];\n\t\t\t\t\t\t<!-- A cell swallowed by a merge is not rendered at all: the anchor's rowspan and\n\t\t\t\t\t\tcolspan already occupy its place, and drawing it would push the row out of shape. -->\n\t\t\t\t\t\t@if (!isHidden(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t@let cell = grid()[rowIndex][colIndex];\n\t\t\t\t\t\t\t@let state = stateOf(rowIndex, colIndex);\n\t\t\t\t\t\t\t@let error = errorOf(rowIndex, colIndex);\n\t\t\t\t\t\t\t@let editable = canEdit(rowIndex, colIndex);\n\t\t\t\t\t\t\t<!-- Worked out once per cell, and only for the one that is open: the config a\n\t\t\t\t\t\tregistered control adapter is asked for, or null when there is nothing to host. -->\n\t\t\t\t\t\t\t@let hosted = editing() && isActive(rowIndex, colIndex) ? hostedControl(rowIndex, colIndex) : null;\n\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__cell\"\n\t\t\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\t\t\t[attr.data-cell]=\"rowIndex + '-' + colIndex\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"tabIndexOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-colindex]=\"colIndex + 1\"\n\t\t\t\t\t\t\t\t[attr.rowspan]=\"rowSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.colspan]=\"colSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-rowspan]=\"rowSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-colspan]=\"colSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"isSelected(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-readonly]=\"!editable || null\"\n\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"(isActive(rowIndex, colIndex) && invalid()) || error ? true : null\"\n\t\t\t\t\t\t\t\t[attr.aria-busy]=\"state === 'saving' || null\"\n\t\t\t\t\t\t\t\t[attr.title]=\"error ?? cell.title\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--active]=\"isActive(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--editing]=\"editing() && isActive(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--selected]=\"isSelected(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--end-of-sheet]=\"reachesEnd(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--filling]=\"isFillPreview(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--readonly]=\"!editable\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--muted]=\"cell.muted\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--end]=\"column.align === 'end'\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--center]=\"column.align === 'center'\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-col]=\"isFrozenColumn(colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-row]=\"isFrozenRow(rowIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-col-edge]=\"isColumnEdge(colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-row-edge]=\"isRowEdge(rowIndex)\"\n\t\t\t\t\t\t\t\t[style.inset-inline-start.px]=\"columnOffsetOf(colIndex)\"\n\t\t\t\t\t\t\t\t[style.inset-block-start.px]=\"rowOffsetOf(rowIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--invalid]=\"\n\t\t\t\t\t\t\t\t\t(isActive(rowIndex, colIndex) && invalid()) ||\n\t\t\t\t\t\t\t\t\t!!error ||\n\t\t\t\t\t\t\t\t\thasFormulaError(rowIndex, colIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.data-state]=\"state\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t(mouseenter)=\"onMouseEnter(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t(mouseup)=\"onMouseUp($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t(dblclick)=\"onDoubleClick()\"\n\t\t\t\t\t\t\t\t(contextmenu)=\"onContextMenu($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (editing() && isActive(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t\t\t@if (editorFor(colIndex); as custom) {\n\t\t\t\t\t\t\t\t\t\t<!-- The host supplied an editor for this column. It reports a value through\n\t\t\t\t\t\t\t\t\t`commit`, or walks away through `cancel`; until it does one of the two the\n\t\t\t\t\t\t\t\t\teditor stays open, so a picker may take as many clicks as it needs. -->\n\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__custom-editor\">\n\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"custom.template\"\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"editorContext(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t} @else if (hosted) {\n\t\t\t\t\t\t\t\t\t\t<!-- A control adapter is registered and this column is a list, so the cell\n\t\t\t\t\t\t\t\t\topens with whatever the project wired instead of the native list. The\n\t\t\t\t\t\t\t\t\twrapper is the supplied editor's, because from the sheet's side this is\n\t\t\t\t\t\t\t\t\tone: something it did not build, filling the cell. -->\n\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__custom-editor\">\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [hubSpreadsheetControl]=\"hosted\" />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t} @else if (column.kind === 'select') {\n\t\t\t\t\t\t\t\t\t\t<select\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__editor hub-spreadsheet__editor--select\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"column.header\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"commitFromEditor($any($event.target).value || null)\"\n\t\t\t\t\t\t\t\t\t\t\t(keydown)=\"onEditorKeydown($event)\"\n\t\t\t\t\t\t\t\t\t\t\t(blur)=\"onEditorBlur()\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<option value=\"\" [selected]=\"cell.value === null\"></option>\n\t\t\t\t\t\t\t\t\t\t\t@for (option of column.options ?? []; track option.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"option.value\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[selected]=\"isChosen(option, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"option.disabled && option.value !== cell.value\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t@if (suggesting()) {\n\t\t\t\t\t\t\t\t\t\t\t<!-- What can go into the formula, because the aliases it needs are nowhere\n\t\t\t\t\t\t\t\t\t\telse on screen. Hidden from assistive technology: the field owns the\n\t\t\t\t\t\t\t\t\t\tconversation, and a list that announced itself over every keystroke\n\t\t\t\t\t\t\t\t\t\twould talk across it. -->\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__suggestions\" role=\"presentation\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (suggestion of suggestions(); track suggestion.label; let index = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__suggestion\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-spreadsheet__suggestion--on]=\"index === suggestionIndex()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"$event.preventDefault(); useSuggestion(suggestion)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__suggestion-name\">{{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (suggestion.hint) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__suggestion-hint\">{{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsuggestion.hint\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__editor\"\n\t\t\t\t\t\t\t\t\t\t\t[type]=\"column.kind === 'date' ? 'date' : 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t[value]=\"draft()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"column.header\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"invalid() || null\"\n\t\t\t\t\t\t\t\t\t\t\t(input)=\"onDraftInput($event)\"\n\t\t\t\t\t\t\t\t\t\t\t(keydown)=\"onEditorKeydown($event)\"\n\t\t\t\t\t\t\t\t\t\t\t(blur)=\"onEditorBlur()\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t@if (column.kind === 'boolean') {\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__check\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"isOn(cell)\"\n\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"!editable\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"column.header\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"toggleBoolean(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t} @else if (cellTemplateFor(colIndex); as own) {\n\t\t\t\t\t\t\t\t\t\t<!-- The host draws this column's cells. The value still travels to the\n\t\t\t\t\t\t\t\t\tclipboard rather than the drawing, and the cell is still what the\n\t\t\t\t\t\t\t\t\tkeyboard is on: the template is inside it, not instead of it. -->\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"own.template\"\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"cellContext(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t<!-- The row's number, so a coordinate can be read off the sheet instead of\n\t\t\t\t\t\t\t\t\tcounted. Only while a formula is being written, and only in the first\n\t\t\t\t\t\t\t\t\tcolumn drawn, which is where a spreadsheet puts it. -->\n\t\t\t\t\t\t\t\t\t\t@if (writingFormula() && colIndex === drawnColumns()[0]) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__rownum\" aria-hidden=\"true\">{{ rowIndex + 1 }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__value\">{{ displayOf(cell, column) }}</span>\n\n\t\t\t\t\t\t\t\t\t\t@if (column.placeholder && !displayOf(cell, column)) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.placeholder }}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<!-- Says the cell opens onto a list or a calendar rather than a field, and\n\t\t\t\t\t\t\t\t\topens it on one click \u2014 as a spreadsheet drops the list of a cell that\n\t\t\t\t\t\t\t\t\thas one. Shown on the cell the reader is on and on the one under the\n\t\t\t\t\t\t\t\t\tpointer. Hidden from assistive technology: the keyboard opens the same\n\t\t\t\t\t\t\t\t\tcell with Alt and the down arrow, and reads the editor itself. -->\n\t\t\t\t\t\t\t\t\t\t@if (editable && affordanceOf(column, colIndex); as affordance) {\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__affordance\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-spreadsheet__affordance--date]=\"affordance === 'date'\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onAffordanceDown($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t@if (cell.secondary) {\n\t\t\t\t\t\t\t\t\t\t<small class=\"hub-spreadsheet__secondary\">{{ cell.secondary }}</small>\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t@if (hasFillHandle(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t\t\t\t<!-- Drawn inside the corner cell so it travels with the selection. Hidden from\n\t\t\t\t\t\t\t\t\tassistive technology: filling is available from the keyboard through the\n\t\t\t\t\t\t\t\t\tclipboard, and a screen reader has no use for a drag target. -->\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__fill-handle\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onFillHandleDown($event)\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (columnWindow().after > 0) {\n\t\t\t\t\t\t<td class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\"></td>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t} @empty {\n\t\t\t\t<tr class=\"hub-spreadsheet__row hub-spreadsheet__row--empty\" role=\"row\">\n\t\t\t\t\t<td class=\"hub-spreadsheet__empty\" role=\"gridcell\" [attr.colspan]=\"bounds().cols || 1\">\n\t\t\t\t\t\t{{ emptyText() }}\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t\t@if (rowWindow().after > 0) {\n\t\t\t\t<tr class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\">\n\t\t\t\t\t<td [attr.colspan]=\"drawnCellCount()\" [style.block-size.px]=\"rowWindow().after\"></td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n\n@if (menuAt(); as at) {\n\t<!-- Positioned against the host, which is the sheet's own corner, so the menu travels with a\n\tscrolled page and never has to be repositioned on scroll. -->\n\t<div\n\t\tclass=\"hub-spreadsheet__menu\"\n\t\trole=\"menu\"\n\t\t[attr.aria-label]=\"'ROW_ACTIONS' | translate\"\n\t\t[style.inset-inline-start.px]=\"at.x\"\n\t\t[style.inset-block-start.px]=\"at.y\"\n\t\t(mousedown)=\"$event.stopPropagation()\"\n\t>\n\t\t@for (entry of menuEntries(); track entry.id) {\n\t\t\t<button class=\"hub-spreadsheet__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"runMenuEntry(entry.id)\">\n\t\t\t\t{{ entry.label | translate: { count: entry.count } }}\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;--hub-spreadsheet-bg: var(--hub-table-bg, var(--hub-sys-color-surface, #fff));--hub-spreadsheet-color: var(--hub-table-color, var(--hub-sys-color-text, #212529));--hub-spreadsheet-border-color: var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-spreadsheet-border-width: var(--hub-table-border-width, 1px);--hub-spreadsheet-border-radius: var(--hub-table-border-radius, var(--hub-sys-radius-lg, .5rem));--hub-spreadsheet-cell-padding-x: var(--hub-table-cell-padding-x, .6rem);--hub-spreadsheet-cell-padding-y: var(--hub-table-cell-padding-y, .4rem);--hub-spreadsheet-cell-line-height: 1.5em;--hub-spreadsheet-header-bg: var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa));--hub-spreadsheet-header-color: var(--hub-sys-text-muted, #6a737b);--hub-spreadsheet-header-font-size: .8125rem;--hub-spreadsheet-header-font-weight: 600;--hub-spreadsheet-cursor-color: var(--hub-sys-color-primary, #0d6efd);--hub-spreadsheet-cursor-width: 2px;--hub-spreadsheet-selection-bg: color-mix(in srgb, var(--hub-spreadsheet-cursor-color) 12%, transparent);--hub-spreadsheet-readonly-bg: color-mix(in srgb, var(--hub-spreadsheet-header-bg) 55%, var(--hub-spreadsheet-bg));--hub-spreadsheet-affordance-color: var(--hub-select-arrow-color, var(--hub-sys-text-muted, #6a737b));--hub-spreadsheet-affordance-size: var(--hub-select-arrow-size, 5px);--hub-spreadsheet-affordance-gap: var(--hub-select-arrow-gap, .5rem);--hub-spreadsheet-affordance-field-border: var(--hub-input-border-width, 1px);--hub-spreadsheet-placeholder-color: var(--hub-sys-text-muted, #6a737b);--hub-spreadsheet-placeholder-opacity: .65;--hub-spreadsheet-placeholder-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-spreadsheet-readonly-color: var(--hub-sys-text-muted, #6a737b);--hub-spreadsheet-editor-bg: var(--hub-spreadsheet-bg);--hub-spreadsheet-editor-color: var(--hub-spreadsheet-color);--hub-spreadsheet-editor-field-bg: transparent;--hub-spreadsheet-editor-field-border-color: transparent;--hub-spreadsheet-editor-field-border-radius: 0;--hub-spreadsheet-editor-field-focus-shadow: none;--hub-spreadsheet-state-pending-color: var(--hub-sys-color-warning, #cc8a00);--hub-spreadsheet-state-saving-color: var(--hub-sys-color-info, #0a7ea4);--hub-spreadsheet-state-saved-color: var(--hub-sys-color-success, #1a7f37);--hub-spreadsheet-state-error-color: var(--hub-sys-color-danger, #b3261e);--hub-spreadsheet-state-conflict-color: var(--hub-sys-color-danger, #b3261e);--hub-spreadsheet-state-bar-width: 3px;--hub-spreadsheet-suggestions-bg: var(--hub-spreadsheet-menu-bg);--hub-spreadsheet-suggestions-border-color: var(--hub-spreadsheet-menu-border-color);--hub-spreadsheet-suggestion-on-bg: var(--hub-spreadsheet-selection-bg);--hub-spreadsheet-alias-bg: color-mix(in srgb, var(--hub-spreadsheet-cursor-color) 12%, transparent);--hub-spreadsheet-alias-color: var(--hub-spreadsheet-cursor-color);--hub-spreadsheet-menu-bg: var(--hub-sys-color-surface, #fff);--hub-spreadsheet-menu-color: var(--hub-spreadsheet-color);--hub-spreadsheet-menu-border-color: var(--hub-spreadsheet-border-color);--hub-spreadsheet-menu-radius: var(--hub-sys-radius-sm, .25rem);--hub-spreadsheet-menu-shadow: 0 6px 20px rgb(0 0 0 / 18%);--hub-spreadsheet-menu-item-padding-x: .85rem;--hub-spreadsheet-menu-item-padding-y: .4rem;--hub-spreadsheet-menu-item-bg-hover: var(--hub-spreadsheet-selection-bg);--hub-spreadsheet-resize-grip-width: 5px;--hub-spreadsheet-resize-grip-color: var(--hub-spreadsheet-cursor-color);--hub-spreadsheet-moving-opacity: .5;--hub-spreadsheet-fill-handle-size: 7px;--hub-spreadsheet-fill-handle-color: var(--hub-spreadsheet-cursor-color);--hub-spreadsheet-fill-preview-bg: color-mix(in srgb, var(--hub-spreadsheet-cursor-color) 6%, transparent);--hub-spreadsheet-invalid-color: var(--hub-sys-color-danger, #b3261e);--hub-spreadsheet-invalid-border-width: 1px;--hub-spreadsheet-invalid-bg: color-mix(in srgb, var(--hub-spreadsheet-invalid-color) 10%, transparent);--hub-spreadsheet-max-block-size: var(--hub-table-container-max-block-size, none);--hub-spreadsheet-frozen-divider-color: var(--hub-spreadsheet-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-spreadsheet-frozen-divider-width: 2px;display:block;color:var(--hub-spreadsheet-color)}.hub-spreadsheet__sink{position:absolute;inline-size:1px;block-size:1px;padding:0;border:0;opacity:0;pointer-events:none;inset-block-start:0;inset-inline-start:0}:host(.hub-spreadsheet--virtual){--hub-spreadsheet-max-block-size: var(--hub-table-container-max-block-size, 24rem)}.hub-spreadsheet__viewport{position:relative;overflow:auto;max-block-size:var(--hub-spreadsheet-max-block-size);border:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-border-color);border-radius:var(--hub-spreadsheet-border-radius);background:var(--hub-spreadsheet-bg)}.hub-spreadsheet__table{inline-size:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}.hub-spreadsheet__header,.hub-spreadsheet__cell{--hub-spreadsheet-cell-edge-inline: var(--hub-spreadsheet-border-width);--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-border-width);padding:var(--hub-spreadsheet-cell-padding-y) var(--hub-spreadsheet-cell-padding-x);border-inline-end:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-border-color);border-block-end:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-border-color);background:var(--hub-spreadsheet-bg);white-space:nowrap;text-align:start}.hub-spreadsheet__header--end-of-sheet,.hub-spreadsheet__cell--end-of-sheet{--hub-spreadsheet-cell-edge-inline: 0px;border-inline-end:0}.hub-spreadsheet__header{position:sticky;isolation:isolate;inset-block-start:0;z-index:2;background:var(--hub-spreadsheet-header-bg);color:var(--hub-spreadsheet-header-color);font-size:var(--hub-spreadsheet-header-font-size);font-weight:var(--hub-spreadsheet-header-font-weight)}.hub-spreadsheet__header--moving{opacity:var(--hub-spreadsheet-moving-opacity)}.hub-spreadsheet__header--move-target{outline:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);outline-offset:calc(var(--hub-spreadsheet-cursor-width) * -1)}.hub-spreadsheet__header--frozen{inset-inline-start:0;z-index:4}.hub-spreadsheet__header--frozen-edge{border-inline-end:var(--hub-spreadsheet-frozen-divider-width) solid var(--hub-spreadsheet-frozen-divider-color)}.hub-spreadsheet__header--end{text-align:end}.hub-spreadsheet__header--center{text-align:center}.hub-spreadsheet__header-text--hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-spreadsheet__subheader{display:block;font-weight:400;opacity:.8}.hub-spreadsheet__cell{position:relative;cursor:cell;-webkit-user-select:none;user-select:none}.hub-spreadsheet__cell--end{text-align:end}.hub-spreadsheet__cell--center{text-align:center}.hub-spreadsheet__cell--frozen-col,.hub-spreadsheet__cell--frozen-row{position:sticky;z-index:1}.hub-spreadsheet__cell--frozen-col{inset-inline-start:0}.hub-spreadsheet__cell--frozen-col.hub-spreadsheet__cell--frozen-row{z-index:2}.hub-spreadsheet__cell--frozen-col-edge{--hub-spreadsheet-cell-edge-inline: var(--hub-spreadsheet-frozen-divider-width);border-inline-end:var(--hub-spreadsheet-frozen-divider-width) solid var(--hub-spreadsheet-frozen-divider-color)}.hub-spreadsheet__cell--frozen-row-edge{--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-frozen-divider-width);border-block-end:var(--hub-spreadsheet-frozen-divider-width) solid var(--hub-spreadsheet-frozen-divider-color)}.hub-spreadsheet__cell--filling{background-image:linear-gradient(var(--hub-spreadsheet-fill-preview-bg),var(--hub-spreadsheet-fill-preview-bg))}.hub-spreadsheet__cell--selected{background-image:linear-gradient(var(--hub-spreadsheet-selection-bg),var(--hub-spreadsheet-selection-bg))}.hub-spreadsheet__cell--readonly{background-color:var(--hub-spreadsheet-readonly-bg);color:var(--hub-spreadsheet-readonly-color);cursor:default}.hub-spreadsheet__cell--muted{color:var(--hub-spreadsheet-readonly-color)}.hub-spreadsheet__cell--invalid{background-image:linear-gradient(var(--hub-spreadsheet-invalid-bg),var(--hub-spreadsheet-invalid-bg));color:var(--hub-spreadsheet-invalid-color);box-shadow:inset 0 0 0 var(--hub-spreadsheet-invalid-border-width) var(--hub-spreadsheet-invalid-color)}.hub-spreadsheet__cell--active{outline:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);outline-offset:calc(var(--hub-spreadsheet-cursor-width) * -1);z-index:2}.hub-spreadsheet__cell--editing{block-size:calc(var(--hub-spreadsheet-cell-line-height) + var(--hub-spreadsheet-cell-padding-y) * 2 + var(--hub-spreadsheet-cell-edge-block))}.hub-spreadsheet__cell--active.hub-spreadsheet__cell--frozen-col,.hub-spreadsheet__cell--active.hub-spreadsheet__cell--frozen-row{z-index:3}.hub-spreadsheet__cell[data-state]:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--hub-spreadsheet-state-bar-width)}.hub-spreadsheet__cell[data-state=pending]:before{background:var(--hub-spreadsheet-state-pending-color)}.hub-spreadsheet__cell[data-state=saving]:before{background:var(--hub-spreadsheet-state-saving-color)}.hub-spreadsheet__cell[data-state=saved]:before{background:var(--hub-spreadsheet-state-saved-color)}.hub-spreadsheet__cell[data-state=error]:before{background:var(--hub-spreadsheet-state-error-color)}.hub-spreadsheet__cell[data-state=conflict]:before{background:repeating-linear-gradient(45deg,var(--hub-spreadsheet-state-conflict-color) 0 3px,transparent 3px 6px)}.hub-spreadsheet__editor--select{padding-inline:calc(var(--hub-spreadsheet-cell-padding-x) - 2px);appearance:auto}.hub-spreadsheet__custom-editor{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:calc(var(--hub-spreadsheet-cell-edge-block) * -1);inset-inline-end:calc(var(--hub-spreadsheet-cell-edge-inline) * -1);display:grid;background:var(--hub-spreadsheet-editor-bg);outline:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);outline-offset:calc(var(--hub-spreadsheet-cursor-width) * -1);z-index:3;--hub-input-bg: var(--hub-spreadsheet-editor-field-bg);--hub-input-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-input-border-radius: var(--hub-spreadsheet-editor-field-border-radius);--hub-input-focus-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-input-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow);--hub-input-padding-x: var(--hub-spreadsheet-cell-padding-x);--hub-select-bg: var(--hub-spreadsheet-editor-field-bg);--hub-select-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-select-border-radius: var(--hub-spreadsheet-editor-field-border-radius);--hub-select-focus-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-select-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow);--hub-select-padding-x: var(--hub-spreadsheet-cell-padding-x)}.hub-spreadsheet__spacer>td{padding:0;border:0;background:var(--hub-spreadsheet-bg)}.hub-spreadsheet__affordance{position:absolute;inset-block:0;inset-inline-end:calc(var(--hub-spreadsheet-affordance-field-border) - var(--hub-spreadsheet-cell-edge-inline));display:flex;align-items:center;padding-inline:var(--hub-spreadsheet-affordance-gap);cursor:pointer;opacity:0}.hub-spreadsheet__cell:hover>.hub-spreadsheet__affordance,.hub-spreadsheet__cell--active>.hub-spreadsheet__affordance{opacity:1}.hub-spreadsheet__affordance:after{content:\"\";inline-size:0;block-size:0;border-style:solid;border-width:var(--hub-spreadsheet-affordance-size) var(--hub-spreadsheet-affordance-size) calc(var(--hub-spreadsheet-affordance-size) / 2);border-color:var(--hub-spreadsheet-affordance-color) transparent transparent}.hub-spreadsheet__affordance--date:after{inline-size:calc(var(--hub-spreadsheet-affordance-size) * 2);block-size:calc(var(--hub-spreadsheet-affordance-size) * 1.8);border:1px solid var(--hub-spreadsheet-affordance-color);border-block-start-width:3px;border-radius:2px}.hub-spreadsheet__placeholder{position:absolute;inset-block:0;inset-inline:var(--hub-spreadsheet-cell-padding-x);display:flex;align-items:center;color:var(--hub-spreadsheet-placeholder-color);opacity:0;pointer-events:none;transition:var(--hub-spreadsheet-placeholder-transition)}.hub-spreadsheet__cell:hover>.hub-spreadsheet__placeholder{opacity:var(--hub-spreadsheet-placeholder-opacity)}.hub-spreadsheet__check{inline-size:1em;block-size:1em;accent-color:var(--hub-spreadsheet-cursor-color);cursor:pointer}.hub-spreadsheet__check:disabled{cursor:default}.hub-spreadsheet__resize-grip{position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--hub-spreadsheet-resize-grip-width);cursor:col-resize;background:transparent;z-index:5}.hub-spreadsheet__resize-grip:hover,.hub-spreadsheet__resize-grip:active{background:var(--hub-spreadsheet-resize-grip-color)}.hub-spreadsheet__fill-handle{position:absolute;inset-block-end:0;inset-inline-end:0;inline-size:var(--hub-spreadsheet-fill-handle-size);block-size:var(--hub-spreadsheet-fill-handle-size);background:var(--hub-spreadsheet-fill-handle-color);cursor:crosshair;z-index:4}.hub-spreadsheet__secondary{display:block;opacity:.75}.hub-spreadsheet__editor{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:calc(var(--hub-spreadsheet-cell-edge-block) * -1);inset-inline-end:calc(var(--hub-spreadsheet-cell-edge-inline) * -1);padding:var(--hub-spreadsheet-cell-padding-y) var(--hub-spreadsheet-cell-padding-x);border:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);border-radius:0;background:var(--hub-spreadsheet-editor-bg);color:var(--hub-spreadsheet-editor-color);font:inherit;font-variant-numeric:tabular-nums;text-align:inherit;outline:none;z-index:2}.hub-spreadsheet__editor[aria-invalid=true]{border-color:var(--hub-spreadsheet-invalid-color)}.hub-spreadsheet__empty{padding-block:calc(var(--hub-spreadsheet-cell-padding-y) * 4);color:var(--hub-spreadsheet-readonly-color);text-align:center;cursor:default}.hub-spreadsheet__menu{position:absolute;z-index:10;min-inline-size:12rem;padding-block:.25rem;border:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-menu-border-color);border-radius:var(--hub-spreadsheet-menu-radius);background:var(--hub-spreadsheet-menu-bg);color:var(--hub-spreadsheet-menu-color);box-shadow:var(--hub-spreadsheet-menu-shadow)}.hub-spreadsheet__menu-item{display:block;inline-size:100%;padding:var(--hub-spreadsheet-menu-item-padding-y) var(--hub-spreadsheet-menu-item-padding-x);border:0;background:transparent;color:inherit;font:inherit;text-align:start;white-space:nowrap;cursor:pointer}.hub-spreadsheet__menu-item:hover,.hub-spreadsheet__menu-item:focus-visible{background:var(--hub-spreadsheet-menu-item-bg-hover)}.hub-spreadsheet__suggestions{position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:12;display:flex;flex-direction:column;min-inline-size:14rem;max-block-size:14rem;overflow-y:auto;border:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-suggestions-border-color);border-radius:var(--hub-spreadsheet-border-radius);background:var(--hub-spreadsheet-suggestions-bg);box-shadow:var(--hub-spreadsheet-menu-shadow)}.hub-spreadsheet__suggestion{display:flex;gap:.5rem;align-items:baseline;justify-content:space-between;padding:var(--hub-spreadsheet-cell-padding-y) var(--hub-spreadsheet-cell-padding-x);border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.hub-spreadsheet__suggestion:hover,.hub-spreadsheet__suggestion--on{background:var(--hub-spreadsheet-suggestion-on-bg)}.hub-spreadsheet__suggestion-name{font-variant-numeric:tabular-nums}.hub-spreadsheet__suggestion-hint{color:var(--hub-spreadsheet-readonly-color);font-size:var(--hub-spreadsheet-header-font-size)}.hub-spreadsheet__alias{margin-inline-start:.4rem;padding:0 .3rem;border:0;border-radius:.25rem;background:var(--hub-spreadsheet-alias-bg);color:var(--hub-spreadsheet-alias-color);font:inherit;font-size:var(--hub-spreadsheet-header-font-size);font-weight:400;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HubSpreadsheetControlDirective, selector: "[hubSpreadsheetControl]", inputs: ["hubSpreadsheetControl"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSpreadsheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-spreadsheet', standalone: true, imports: [NgTemplateOutlet, TranslatePipe, HubSpreadsheetControlDirective], providers: [{ provide: HUB_TRANSLATION_PREFIX, useValue: 'HUBUI.SPREADSHEET' }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        /*
+                         * The sheet draws itself from what it measures, so what a server writes and what a browser
+                         * then wants are two different documents — and hydration's job is to insist they are one.
+                         *
+                         * A virtualised sheet measures a viewport that does not exist on a server and draws every
+                         * row; the browser measures a real one and draws fifteen. A column that draws its own cells
+                         * needs its template, which a content query has not resolved on the first server pass. Both
+                         * come out as NG0500, and neither is a mistake to be fixed — it is what this component is.
+                         *
+                         * So the markup is re-created rather than adopted. The server's copy still ships in the
+                         * page, which is what a crawler reads; the browser simply builds its own.
+                         */
+                        ngSkipHydration: 'true',
+                        class: 'hub-spreadsheet',
+                        '[class.hub-spreadsheet--readonly]': 'readonly()',
+                        '[class.hub-spreadsheet--editing]': 'editing()',
+                        '[class.hub-spreadsheet--virtual]': 'virtual()',
+                        '(document:mouseup)': 'endDrag()',
+                        '(document:mousemove)': 'onPointerMove($event)',
+                        '(document:mousedown)': 'closeMenu()',
+                        '(document:keydown.escape)': 'closeMenu()'
+                    }, template: "<!--\n\tThe off-screen field exists for one reason: a browser only dispatches `paste` to something\n\teditable. The paste shortcut parks the focus here for the length of the event and the cell\n\ttakes it straight back, so the reader never notices and the grid keeps its own focus model.\n-->\n<textarea class=\"hub-spreadsheet__sink\" tabindex=\"-1\" aria-hidden=\"true\" readonly (paste)=\"onPaste($event)\"></textarea>\n\n<div class=\"hub-spreadsheet__viewport\" #viewport (scroll)=\"onViewportScroll()\">\n\t<table\n\t\tclass=\"hub-spreadsheet__table\"\n\t\trole=\"grid\"\n\t\t[attr.aria-rowcount]=\"bounds().rows\"\n\t\t[attr.aria-colcount]=\"bounds().cols\"\n\t\t[attr.aria-readonly]=\"readonly() || null\"\n\t\t(keydown)=\"onKeydown($event)\"\n\t\t(copy)=\"onCopy($event, false)\"\n\t\t(cut)=\"onCopy($event, true)\"\n\t>\n\t\t<thead class=\"hub-spreadsheet__head\">\n\t\t\t<tr role=\"row\">\n\t\t\t\t<!-- Holds the width of the columns that are not drawn, so the sheet is as wide as it\n\t\t\t\tsays it is and the ones that are drawn land where they belong. -->\n\t\t\t\t@if (columnWindow().before > 0) {\n\t\t\t\t\t<!-- A minimum, not a width: in a table that shares its space out, a width is a\n\t\t\t\t\tsuggestion the algorithm is free to ignore, and an empty cell asked for three\n\t\t\t\t\tthousand pixels came out two wide. -->\n\t\t\t\t\t<th\n\t\t\t\t\t\tclass=\"hub-spreadsheet__spacer\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t[style.min-inline-size.px]=\"columnWindow().before\"\n\t\t\t\t\t\t[style.inline-size.px]=\"columnWindow().before\"\n\t\t\t\t\t></th>\n\t\t\t\t}\n\n\t\t\t\t@for (columnIndex of drawnColumns(); track trackColumn(columnIndex, columns()[columnIndex])) {\n\t\t\t\t\t@let column = columns()[columnIndex];\n\t\t\t\t\t<th\n\t\t\t\t\t\tclass=\"hub-spreadsheet__header\"\n\t\t\t\t\t\trole=\"columnheader\"\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--frozen]=\"isFrozenColumn(columnIndex)\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--frozen-edge]=\"isColumnEdge(columnIndex)\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--end]=\"column.align === 'end'\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--center]=\"column.align === 'center'\"\n\t\t\t\t\t\t[style.inset-inline-start.px]=\"columnOffsetOf(columnIndex)\"\n\t\t\t\t\t\t[style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t[style.width.px]=\"widthOf(columnIndex)\"\n\t\t\t\t\t\t[attr.data-header]=\"columnIndex\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--end-of-sheet]=\"columnIndex === bounds().cols - 1\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--moving]=\"isMovingColumn(columnIndex)\"\n\t\t\t\t\t\t[class.hub-spreadsheet__header--move-target]=\"isMoveTarget(columnIndex)\"\n\t\t\t\t\t\t(mousedown)=\"onHeaderMouseDown($event, columnIndex)\"\n\t\t\t\t\t\t(mouseenter)=\"onHeaderMouseEnter(columnIndex)\"\n\t\t\t\t\t\t[attr.aria-colindex]=\"columnIndex + 1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span [class.hub-spreadsheet__header-text--hidden]=\"column.headerHidden\">\n\t\t\t\t\t\t\t{{ column.header }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<!-- The name a formula calls this column, which is not the name on the header.\n\t\t\t\t\tShown only while one is being written, and clickable, because the alternative is\n\t\t\t\t\tknowing it by heart. -->\n\t\t\t\t\t\t@if (writingFormula()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__alias\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t(mousedown)=\"\n\t\t\t\t\t\t\t\t\t$event.preventDefault();\n\t\t\t\t\t\t\t\t\tuseSuggestion({ label: column.key, kind: 'column', insert: '[' + column.key + ']' })\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__alias-letter\">{{ columnLetter(columnIndex) }}</span>\n\t\t\t\t\t\t\t\t{{ column.key }}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (column.subheader) {\n\t\t\t\t\t\t\t<small class=\"hub-spreadsheet__subheader\">{{ column.subheader }}</small>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (resizableColumns()) {\n\t\t\t\t\t\t\t<!-- Sits inside the header's trailing edge. Hidden from assistive technology:\n\t\t\t\t\t\t\ta width is a matter of taste, and a screen reader has no use for a drag\n\t\t\t\t\t\t\ttarget it cannot aim at. -->\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__resize-grip\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onResizeStart($event, columnIndex)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\n\t\t\t\t@if (columnWindow().after > 0) {\n\t\t\t\t\t<th\n\t\t\t\t\t\tclass=\"hub-spreadsheet__spacer\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t[style.min-inline-size.px]=\"columnWindow().after\"\n\t\t\t\t\t\t[style.inline-size.px]=\"columnWindow().after\"\n\t\t\t\t\t></th>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</thead>\n\n\t\t<tbody class=\"hub-spreadsheet__body\">\n\t\t\t<!-- The rows above the window are not in the document; this holds their height, so the\n\t\t\tscrollbar still says how long the sheet is and the rows that are drawn land where they\n\t\t\tbelong. Hidden from assistive technology, which reads `aria-rowindex` instead. -->\n\t\t\t@if (rowWindow().before > 0) {\n\t\t\t\t<tr class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\">\n\t\t\t\t\t<td [attr.colspan]=\"drawnCellCount()\" [style.block-size.px]=\"rowWindow().before\"></td>\n\t\t\t\t</tr>\n\t\t\t}\n\n\t\t\t@for (rowIndex of drawnRows(); track trackRow(rowIndex)) {\n\t\t\t\t<tr\n\t\t\t\t\tclass=\"hub-spreadsheet__row\"\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\t[class.hub-spreadsheet__row--frozen]=\"isFrozenRow(rowIndex)\"\n\t\t\t\t\t[class.hub-spreadsheet__row--frozen-edge]=\"isRowEdge(rowIndex)\"\n\t\t\t\t\t[attr.aria-rowindex]=\"rowIndex + 1\"\n\t\t\t\t>\n\t\t\t\t\t@if (columnWindow().before > 0) {\n\t\t\t\t\t\t<td class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\"></td>\n\t\t\t\t\t}\n\n\t\t\t\t\t@for (colIndex of drawnColumns(); track trackColumn(colIndex, columns()[colIndex])) {\n\t\t\t\t\t\t@let column = columns()[colIndex];\n\t\t\t\t\t\t<!-- A cell swallowed by a merge is not rendered at all: the anchor's rowspan and\n\t\t\t\t\t\tcolspan already occupy its place, and drawing it would push the row out of shape. -->\n\t\t\t\t\t\t@if (!isHidden(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t@let cell = grid()[rowIndex][colIndex];\n\t\t\t\t\t\t\t@let state = stateOf(rowIndex, colIndex);\n\t\t\t\t\t\t\t@let error = errorOf(rowIndex, colIndex);\n\t\t\t\t\t\t\t@let editable = canEdit(rowIndex, colIndex);\n\t\t\t\t\t\t\t<!-- Worked out once per cell, and only for the one that is open: the config a\n\t\t\t\t\t\tregistered control adapter is asked for, or null when there is nothing to host. -->\n\t\t\t\t\t\t\t@let hosted = editing() && isActive(rowIndex, colIndex) ? hostedControl(rowIndex, colIndex) : null;\n\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__cell\"\n\t\t\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\t\t\t[attr.data-cell]=\"rowIndex + '-' + colIndex\"\n\t\t\t\t\t\t\t\t[attr.tabindex]=\"tabIndexOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-colindex]=\"colIndex + 1\"\n\t\t\t\t\t\t\t\t[attr.rowspan]=\"rowSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.colspan]=\"colSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-rowspan]=\"rowSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-colspan]=\"colSpanOf(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-selected]=\"isSelected(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[attr.aria-readonly]=\"!editable || null\"\n\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"(isActive(rowIndex, colIndex) && invalid()) || error ? true : null\"\n\t\t\t\t\t\t\t\t[attr.aria-busy]=\"state === 'saving' || null\"\n\t\t\t\t\t\t\t\t[attr.title]=\"error ?? cell.title\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--active]=\"isActive(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--editing]=\"editing() && isActive(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--selected]=\"isSelected(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--end-of-sheet]=\"reachesEnd(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--filling]=\"isFillPreview(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--readonly]=\"!editable\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--muted]=\"cell.muted\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--end]=\"column.align === 'end'\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--center]=\"column.align === 'center'\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-col]=\"isFrozenColumn(colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-row]=\"isFrozenRow(rowIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-col-edge]=\"isColumnEdge(colIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--frozen-row-edge]=\"isRowEdge(rowIndex)\"\n\t\t\t\t\t\t\t\t[style.inset-inline-start.px]=\"columnOffsetOf(colIndex)\"\n\t\t\t\t\t\t\t\t[style.inset-block-start.px]=\"rowOffsetOf(rowIndex)\"\n\t\t\t\t\t\t\t\t[class.hub-spreadsheet__cell--invalid]=\"\n\t\t\t\t\t\t\t\t\t(isActive(rowIndex, colIndex) && invalid()) ||\n\t\t\t\t\t\t\t\t\t!!error ||\n\t\t\t\t\t\t\t\t\thasFormulaError(rowIndex, colIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.data-state]=\"state\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t(mouseenter)=\"onMouseEnter(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t(mouseup)=\"onMouseUp($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t(dblclick)=\"onDoubleClick()\"\n\t\t\t\t\t\t\t\t(contextmenu)=\"onContextMenu($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (editing() && isActive(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t\t\t@if (editorFor(colIndex); as custom) {\n\t\t\t\t\t\t\t\t\t\t<!-- The host supplied an editor for this column. It reports a value through\n\t\t\t\t\t\t\t\t\t`commit`, or walks away through `cancel`; until it does one of the two the\n\t\t\t\t\t\t\t\t\teditor stays open, so a picker may take as many clicks as it needs. -->\n\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__custom-editor\">\n\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"custom.template\"\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"editorContext(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t} @else if (hosted) {\n\t\t\t\t\t\t\t\t\t\t<!-- A control adapter is registered and this column is a list, so the cell\n\t\t\t\t\t\t\t\t\topens with whatever the project wired instead of the native list. The\n\t\t\t\t\t\t\t\t\twrapper is the supplied editor's, because from the sheet's side this is\n\t\t\t\t\t\t\t\t\tone: something it did not build, filling the cell. -->\n\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__custom-editor\">\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [hubSpreadsheetControl]=\"hosted\" />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t} @else if (column.kind === 'select') {\n\t\t\t\t\t\t\t\t\t\t<select\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__editor hub-spreadsheet__editor--select\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"column.header\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"commitFromEditor($any($event.target).value || null)\"\n\t\t\t\t\t\t\t\t\t\t\t(keydown)=\"onEditorKeydown($event)\"\n\t\t\t\t\t\t\t\t\t\t\t(blur)=\"onEditorBlur()\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<option value=\"\" [selected]=\"cell.value === null\"></option>\n\t\t\t\t\t\t\t\t\t\t\t@for (option of column.options ?? []; track option.value) {\n\t\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"option.value\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[selected]=\"isChosen(option, column)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"option.disabled && option.value !== cell.value\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t@if (suggesting()) {\n\t\t\t\t\t\t\t\t\t\t\t<!-- What can go into the formula, because the aliases it needs are nowhere\n\t\t\t\t\t\t\t\t\t\telse on screen. Hidden from assistive technology: the field owns the\n\t\t\t\t\t\t\t\t\t\tconversation, and a list that announced itself over every keystroke\n\t\t\t\t\t\t\t\t\t\twould talk across it. -->\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__suggestions\" role=\"presentation\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t@for (suggestion of suggestions(); track suggestion.label; let index = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__suggestion\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-spreadsheet__suggestion--on]=\"index === suggestionIndex()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"$event.preventDefault(); useSuggestion(suggestion)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__suggestion-name\">{{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (suggestion.hint) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__suggestion-hint\">{{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsuggestion.hint\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__editor\"\n\t\t\t\t\t\t\t\t\t\t\t[type]=\"column.kind === 'date' ? 'date' : 'text'\"\n\t\t\t\t\t\t\t\t\t\t\t[value]=\"draft()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"column.header\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-invalid]=\"invalid() || null\"\n\t\t\t\t\t\t\t\t\t\t\t(input)=\"onDraftInput($event)\"\n\t\t\t\t\t\t\t\t\t\t\t(keydown)=\"onEditorKeydown($event)\"\n\t\t\t\t\t\t\t\t\t\t\t(blur)=\"onEditorBlur()\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t@if (column.kind === 'boolean') {\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__check\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"isOn(cell)\"\n\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"!editable\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"column.header\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"toggleBoolean(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t} @else if (cellTemplateFor(colIndex); as own) {\n\t\t\t\t\t\t\t\t\t\t<!-- The host draws this column's cells. The value still travels to the\n\t\t\t\t\t\t\t\t\tclipboard rather than the drawing, and the cell is still what the\n\t\t\t\t\t\t\t\t\tkeyboard is on: the template is inside it, not instead of it. -->\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"own.template\"\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"cellContext(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t<!-- The row's number, so a coordinate can be read off the sheet instead of\n\t\t\t\t\t\t\t\t\tcounted. Only while a formula is being written, and only in the first\n\t\t\t\t\t\t\t\t\tcolumn drawn, which is where a spreadsheet puts it. -->\n\t\t\t\t\t\t\t\t\t\t@if (writingFormula() && colIndex === drawnColumns()[0]) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__rownum\" aria-hidden=\"true\">{{ rowIndex + 1 }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__value\">{{ displayOf(cell, column) }}</span>\n\n\t\t\t\t\t\t\t\t\t\t@if (column.placeholder && !displayOf(cell, column)) {\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-spreadsheet__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t{{ column.placeholder }}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<!-- Says the cell opens onto a list or a calendar rather than a field, and\n\t\t\t\t\t\t\t\t\topens it on one click \u2014 as a spreadsheet drops the list of a cell that\n\t\t\t\t\t\t\t\t\thas one. Shown on the cell the reader is on and on the one under the\n\t\t\t\t\t\t\t\t\tpointer. Hidden from assistive technology: the keyboard opens the same\n\t\t\t\t\t\t\t\t\tcell with Alt and the down arrow, and reads the editor itself. -->\n\t\t\t\t\t\t\t\t\t\t@if (editable && affordanceOf(column, colIndex); as affordance) {\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__affordance\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-spreadsheet__affordance--date]=\"affordance === 'date'\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onAffordanceDown($event, rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t@if (cell.secondary) {\n\t\t\t\t\t\t\t\t\t\t<small class=\"hub-spreadsheet__secondary\">{{ cell.secondary }}</small>\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t@if (hasFillHandle(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t\t\t\t<!-- Drawn inside the corner cell so it travels with the selection. Hidden from\n\t\t\t\t\t\t\t\t\tassistive technology: filling is available from the keyboard through the\n\t\t\t\t\t\t\t\t\tclipboard, and a screen reader has no use for a drag target. -->\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__fill-handle\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onFillHandleDown($event)\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (columnWindow().after > 0) {\n\t\t\t\t\t\t<td class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\"></td>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t} @empty {\n\t\t\t\t<tr class=\"hub-spreadsheet__row hub-spreadsheet__row--empty\" role=\"row\">\n\t\t\t\t\t<td class=\"hub-spreadsheet__empty\" role=\"gridcell\" [attr.colspan]=\"bounds().cols || 1\">\n\t\t\t\t\t\t{{ emptyText() }}\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t\t@if (rowWindow().after > 0) {\n\t\t\t\t<tr class=\"hub-spreadsheet__spacer\" role=\"presentation\" aria-hidden=\"true\">\n\t\t\t\t\t<td [attr.colspan]=\"drawnCellCount()\" [style.block-size.px]=\"rowWindow().after\"></td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n\n@if (menuAt(); as at) {\n\t<!-- Positioned against the host, which is the sheet's own corner, so the menu travels with a\n\tscrolled page and never has to be repositioned on scroll. -->\n\t<div\n\t\tclass=\"hub-spreadsheet__menu\"\n\t\trole=\"menu\"\n\t\t[attr.aria-label]=\"'ROW_ACTIONS' | translate\"\n\t\t[style.inset-inline-start.px]=\"at.x\"\n\t\t[style.inset-block-start.px]=\"at.y\"\n\t\t(mousedown)=\"$event.stopPropagation()\"\n\t>\n\t\t@for (entry of menuEntries(); track entry.id) {\n\t\t\t<button class=\"hub-spreadsheet__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"runMenuEntry(entry.id)\">\n\t\t\t\t{{ entry.label | translate: { count: entry.count } }}\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;--hub-spreadsheet-bg: var(--hub-table-bg, var(--hub-sys-color-surface, #fff));--hub-spreadsheet-color: var(--hub-table-color, var(--hub-sys-color-text, #212529));--hub-spreadsheet-border-color: var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-spreadsheet-border-width: var(--hub-table-border-width, 1px);--hub-spreadsheet-border-radius: var(--hub-table-border-radius, var(--hub-sys-radius-lg, .5rem));--hub-spreadsheet-cell-padding-x: var(--hub-table-cell-padding-x, .6rem);--hub-spreadsheet-cell-padding-y: var(--hub-table-cell-padding-y, .4rem);--hub-spreadsheet-cell-line-height: 1.5em;--hub-spreadsheet-header-bg: var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa));--hub-spreadsheet-header-color: var(--hub-sys-text-muted, #6a737b);--hub-spreadsheet-header-font-size: .8125rem;--hub-spreadsheet-header-font-weight: 600;--hub-spreadsheet-cursor-color: var(--hub-sys-color-primary, #0d6efd);--hub-spreadsheet-cursor-width: 2px;--hub-spreadsheet-selection-bg: color-mix(in srgb, var(--hub-spreadsheet-cursor-color) 12%, transparent);--hub-spreadsheet-readonly-bg: color-mix(in srgb, var(--hub-spreadsheet-header-bg) 55%, var(--hub-spreadsheet-bg));--hub-spreadsheet-affordance-color: var(--hub-select-arrow-color, var(--hub-sys-text-muted, #6a737b));--hub-spreadsheet-affordance-size: var(--hub-select-arrow-size, 5px);--hub-spreadsheet-affordance-gap: var(--hub-select-arrow-gap, .5rem);--hub-spreadsheet-affordance-field-border: var(--hub-input-border-width, 1px);--hub-spreadsheet-placeholder-color: var(--hub-sys-text-muted, #6a737b);--hub-spreadsheet-placeholder-opacity: .65;--hub-spreadsheet-placeholder-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-spreadsheet-readonly-color: var(--hub-sys-text-muted, #6a737b);--hub-spreadsheet-editor-bg: var(--hub-spreadsheet-bg);--hub-spreadsheet-editor-color: var(--hub-spreadsheet-color);--hub-spreadsheet-editor-field-bg: transparent;--hub-spreadsheet-editor-field-border-color: transparent;--hub-spreadsheet-editor-field-border-radius: 0;--hub-spreadsheet-editor-field-focus-shadow: none;--hub-spreadsheet-state-pending-color: var(--hub-sys-color-warning, #cc8a00);--hub-spreadsheet-state-saving-color: var(--hub-sys-color-info, #0a7ea4);--hub-spreadsheet-state-saved-color: var(--hub-sys-color-success, #1a7f37);--hub-spreadsheet-state-error-color: var(--hub-sys-color-danger, #b3261e);--hub-spreadsheet-state-conflict-color: var(--hub-sys-color-danger, #b3261e);--hub-spreadsheet-state-bar-width: 3px;--hub-spreadsheet-suggestions-bg: var(--hub-spreadsheet-menu-bg);--hub-spreadsheet-suggestions-border-color: var(--hub-spreadsheet-menu-border-color);--hub-spreadsheet-suggestion-on-bg: var(--hub-spreadsheet-selection-bg);--hub-spreadsheet-alias-bg: color-mix(in srgb, var(--hub-spreadsheet-cursor-color) 12%, transparent);--hub-spreadsheet-alias-color: var(--hub-spreadsheet-cursor-color);--hub-spreadsheet-menu-bg: var(--hub-sys-color-surface, #fff);--hub-spreadsheet-menu-color: var(--hub-spreadsheet-color);--hub-spreadsheet-menu-border-color: var(--hub-spreadsheet-border-color);--hub-spreadsheet-menu-radius: var(--hub-sys-radius-sm, .25rem);--hub-spreadsheet-menu-shadow: 0 6px 20px rgb(0 0 0 / 18%);--hub-spreadsheet-menu-item-padding-x: .85rem;--hub-spreadsheet-menu-item-padding-y: .4rem;--hub-spreadsheet-menu-item-bg-hover: var(--hub-spreadsheet-selection-bg);--hub-spreadsheet-resize-grip-width: 5px;--hub-spreadsheet-resize-grip-color: var(--hub-spreadsheet-cursor-color);--hub-spreadsheet-moving-opacity: .5;--hub-spreadsheet-fill-handle-size: 7px;--hub-spreadsheet-fill-handle-color: var(--hub-spreadsheet-cursor-color);--hub-spreadsheet-fill-preview-bg: color-mix(in srgb, var(--hub-spreadsheet-cursor-color) 6%, transparent);--hub-spreadsheet-invalid-color: var(--hub-sys-color-danger, #b3261e);--hub-spreadsheet-invalid-border-width: 1px;--hub-spreadsheet-invalid-bg: color-mix(in srgb, var(--hub-spreadsheet-invalid-color) 10%, transparent);--hub-spreadsheet-max-block-size: var(--hub-table-container-max-block-size, none);--hub-spreadsheet-frozen-divider-color: var(--hub-spreadsheet-border-color, var(--hub-sys-border-color-default, #dee2e6));--hub-spreadsheet-frozen-divider-width: 2px;display:block;color:var(--hub-spreadsheet-color)}.hub-spreadsheet__sink{position:absolute;inline-size:1px;block-size:1px;padding:0;border:0;opacity:0;pointer-events:none;inset-block-start:0;inset-inline-start:0}:host(.hub-spreadsheet--virtual){--hub-spreadsheet-max-block-size: var(--hub-table-container-max-block-size, 24rem)}.hub-spreadsheet__viewport{position:relative;overflow:auto;max-block-size:var(--hub-spreadsheet-max-block-size);border:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-border-color);border-radius:var(--hub-spreadsheet-border-radius);background:var(--hub-spreadsheet-bg)}.hub-spreadsheet__table{inline-size:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}.hub-spreadsheet__header,.hub-spreadsheet__cell{--hub-spreadsheet-cell-edge-inline: var(--hub-spreadsheet-border-width);--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-border-width);padding:var(--hub-spreadsheet-cell-padding-y) var(--hub-spreadsheet-cell-padding-x);border-inline-end:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-border-color);border-block-end:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-border-color);background:var(--hub-spreadsheet-bg);white-space:nowrap;text-align:start}.hub-spreadsheet__header--end-of-sheet,.hub-spreadsheet__cell--end-of-sheet{--hub-spreadsheet-cell-edge-inline: 0px;border-inline-end:0}.hub-spreadsheet__header{position:sticky;isolation:isolate;inset-block-start:0;z-index:2;background:var(--hub-spreadsheet-header-bg);color:var(--hub-spreadsheet-header-color);font-size:var(--hub-spreadsheet-header-font-size);font-weight:var(--hub-spreadsheet-header-font-weight)}.hub-spreadsheet__header--moving{opacity:var(--hub-spreadsheet-moving-opacity)}.hub-spreadsheet__header--move-target{outline:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);outline-offset:calc(var(--hub-spreadsheet-cursor-width) * -1)}.hub-spreadsheet__header--frozen{inset-inline-start:0;z-index:4}.hub-spreadsheet__header--frozen-edge{border-inline-end:var(--hub-spreadsheet-frozen-divider-width) solid var(--hub-spreadsheet-frozen-divider-color)}.hub-spreadsheet__header--end{text-align:end}.hub-spreadsheet__header--center{text-align:center}.hub-spreadsheet__header-text--hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-spreadsheet__subheader{display:block;font-weight:400;opacity:.8}.hub-spreadsheet__cell{position:relative;cursor:cell;-webkit-user-select:none;user-select:none}.hub-spreadsheet__cell--end{text-align:end}.hub-spreadsheet__cell--center{text-align:center}.hub-spreadsheet__cell--frozen-col,.hub-spreadsheet__cell--frozen-row{position:sticky;z-index:1}.hub-spreadsheet__cell--frozen-col{inset-inline-start:0}.hub-spreadsheet__cell--frozen-col.hub-spreadsheet__cell--frozen-row{z-index:2}.hub-spreadsheet__cell--frozen-col-edge{--hub-spreadsheet-cell-edge-inline: var(--hub-spreadsheet-frozen-divider-width);border-inline-end:var(--hub-spreadsheet-frozen-divider-width) solid var(--hub-spreadsheet-frozen-divider-color)}.hub-spreadsheet__cell--frozen-row-edge{--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-frozen-divider-width);border-block-end:var(--hub-spreadsheet-frozen-divider-width) solid var(--hub-spreadsheet-frozen-divider-color)}.hub-spreadsheet__cell--filling{background-image:linear-gradient(var(--hub-spreadsheet-fill-preview-bg),var(--hub-spreadsheet-fill-preview-bg))}.hub-spreadsheet__cell--selected{background-image:linear-gradient(var(--hub-spreadsheet-selection-bg),var(--hub-spreadsheet-selection-bg))}.hub-spreadsheet__cell--readonly{background-color:var(--hub-spreadsheet-readonly-bg);color:var(--hub-spreadsheet-readonly-color);cursor:default}.hub-spreadsheet__cell--muted{color:var(--hub-spreadsheet-readonly-color)}.hub-spreadsheet__cell--invalid{background-image:linear-gradient(var(--hub-spreadsheet-invalid-bg),var(--hub-spreadsheet-invalid-bg));color:var(--hub-spreadsheet-invalid-color);box-shadow:inset 0 0 0 var(--hub-spreadsheet-invalid-border-width) var(--hub-spreadsheet-invalid-color)}.hub-spreadsheet__cell--active{outline:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);outline-offset:calc(var(--hub-spreadsheet-cursor-width) * -1);z-index:2}.hub-spreadsheet__cell--editing{block-size:calc(var(--hub-spreadsheet-cell-line-height) + var(--hub-spreadsheet-cell-padding-y) * 2 + var(--hub-spreadsheet-cell-edge-block))}.hub-spreadsheet__cell--active.hub-spreadsheet__cell--frozen-col,.hub-spreadsheet__cell--active.hub-spreadsheet__cell--frozen-row{z-index:3}.hub-spreadsheet__cell[data-state]:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--hub-spreadsheet-state-bar-width)}.hub-spreadsheet__cell[data-state=pending]:before{background:var(--hub-spreadsheet-state-pending-color)}.hub-spreadsheet__cell[data-state=saving]:before{background:var(--hub-spreadsheet-state-saving-color)}.hub-spreadsheet__cell[data-state=saved]:before{background:var(--hub-spreadsheet-state-saved-color)}.hub-spreadsheet__cell[data-state=error]:before{background:var(--hub-spreadsheet-state-error-color)}.hub-spreadsheet__cell[data-state=conflict]:before{background:repeating-linear-gradient(45deg,var(--hub-spreadsheet-state-conflict-color) 0 3px,transparent 3px 6px)}.hub-spreadsheet__editor--select{padding-inline:calc(var(--hub-spreadsheet-cell-padding-x) - 2px);appearance:auto}.hub-spreadsheet__custom-editor{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:calc(var(--hub-spreadsheet-cell-edge-block) * -1);inset-inline-end:calc(var(--hub-spreadsheet-cell-edge-inline) * -1);display:grid;background:var(--hub-spreadsheet-editor-bg);outline:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);outline-offset:calc(var(--hub-spreadsheet-cursor-width) * -1);z-index:3;--hub-input-bg: var(--hub-spreadsheet-editor-field-bg);--hub-input-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-input-border-radius: var(--hub-spreadsheet-editor-field-border-radius);--hub-input-focus-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-input-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow);--hub-input-padding-x: var(--hub-spreadsheet-cell-padding-x);--hub-select-bg: var(--hub-spreadsheet-editor-field-bg);--hub-select-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-select-border-radius: var(--hub-spreadsheet-editor-field-border-radius);--hub-select-focus-border-color: var(--hub-spreadsheet-editor-field-border-color);--hub-select-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow);--hub-select-padding-x: var(--hub-spreadsheet-cell-padding-x)}.hub-spreadsheet__spacer>td{padding:0;border:0;background:var(--hub-spreadsheet-bg)}.hub-spreadsheet__affordance{position:absolute;inset-block:0;inset-inline-end:calc(var(--hub-spreadsheet-affordance-field-border) - var(--hub-spreadsheet-cell-edge-inline));display:flex;align-items:center;padding-inline:var(--hub-spreadsheet-affordance-gap);cursor:pointer;opacity:0}.hub-spreadsheet__cell:hover>.hub-spreadsheet__affordance,.hub-spreadsheet__cell--active>.hub-spreadsheet__affordance{opacity:1}.hub-spreadsheet__affordance:after{content:\"\";inline-size:0;block-size:0;border-style:solid;border-width:var(--hub-spreadsheet-affordance-size) var(--hub-spreadsheet-affordance-size) calc(var(--hub-spreadsheet-affordance-size) / 2);border-color:var(--hub-spreadsheet-affordance-color) transparent transparent}.hub-spreadsheet__affordance--date:after{inline-size:calc(var(--hub-spreadsheet-affordance-size) * 2);block-size:calc(var(--hub-spreadsheet-affordance-size) * 1.8);border:1px solid var(--hub-spreadsheet-affordance-color);border-block-start-width:3px;border-radius:2px}.hub-spreadsheet__placeholder{position:absolute;inset-block:0;inset-inline:var(--hub-spreadsheet-cell-padding-x);display:flex;align-items:center;color:var(--hub-spreadsheet-placeholder-color);opacity:0;pointer-events:none;transition:var(--hub-spreadsheet-placeholder-transition)}.hub-spreadsheet__cell:hover>.hub-spreadsheet__placeholder{opacity:var(--hub-spreadsheet-placeholder-opacity)}.hub-spreadsheet__check{inline-size:1em;block-size:1em;accent-color:var(--hub-spreadsheet-cursor-color);cursor:pointer}.hub-spreadsheet__check:disabled{cursor:default}.hub-spreadsheet__resize-grip{position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--hub-spreadsheet-resize-grip-width);cursor:col-resize;background:transparent;z-index:5}.hub-spreadsheet__resize-grip:hover,.hub-spreadsheet__resize-grip:active{background:var(--hub-spreadsheet-resize-grip-color)}.hub-spreadsheet__fill-handle{position:absolute;inset-block-end:0;inset-inline-end:0;inline-size:var(--hub-spreadsheet-fill-handle-size);block-size:var(--hub-spreadsheet-fill-handle-size);background:var(--hub-spreadsheet-fill-handle-color);cursor:crosshair;z-index:4}.hub-spreadsheet__secondary{display:block;opacity:.75}.hub-spreadsheet__editor{position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:calc(var(--hub-spreadsheet-cell-edge-block) * -1);inset-inline-end:calc(var(--hub-spreadsheet-cell-edge-inline) * -1);padding:var(--hub-spreadsheet-cell-padding-y) var(--hub-spreadsheet-cell-padding-x);border:var(--hub-spreadsheet-cursor-width) solid var(--hub-spreadsheet-cursor-color);border-radius:0;background:var(--hub-spreadsheet-editor-bg);color:var(--hub-spreadsheet-editor-color);font:inherit;font-variant-numeric:tabular-nums;text-align:inherit;outline:none;z-index:2}.hub-spreadsheet__editor[aria-invalid=true]{border-color:var(--hub-spreadsheet-invalid-color)}.hub-spreadsheet__empty{padding-block:calc(var(--hub-spreadsheet-cell-padding-y) * 4);color:var(--hub-spreadsheet-readonly-color);text-align:center;cursor:default}.hub-spreadsheet__menu{position:absolute;z-index:10;min-inline-size:12rem;padding-block:.25rem;border:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-menu-border-color);border-radius:var(--hub-spreadsheet-menu-radius);background:var(--hub-spreadsheet-menu-bg);color:var(--hub-spreadsheet-menu-color);box-shadow:var(--hub-spreadsheet-menu-shadow)}.hub-spreadsheet__menu-item{display:block;inline-size:100%;padding:var(--hub-spreadsheet-menu-item-padding-y) var(--hub-spreadsheet-menu-item-padding-x);border:0;background:transparent;color:inherit;font:inherit;text-align:start;white-space:nowrap;cursor:pointer}.hub-spreadsheet__menu-item:hover,.hub-spreadsheet__menu-item:focus-visible{background:var(--hub-spreadsheet-menu-item-bg-hover)}.hub-spreadsheet__suggestions{position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:12;display:flex;flex-direction:column;min-inline-size:14rem;max-block-size:14rem;overflow-y:auto;border:var(--hub-spreadsheet-border-width) solid var(--hub-spreadsheet-suggestions-border-color);border-radius:var(--hub-spreadsheet-border-radius);background:var(--hub-spreadsheet-suggestions-bg);box-shadow:var(--hub-spreadsheet-menu-shadow)}.hub-spreadsheet__suggestion{display:flex;gap:.5rem;align-items:baseline;justify-content:space-between;padding:var(--hub-spreadsheet-cell-padding-y) var(--hub-spreadsheet-cell-padding-x);border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.hub-spreadsheet__suggestion:hover,.hub-spreadsheet__suggestion--on{background:var(--hub-spreadsheet-suggestion-on-bg)}.hub-spreadsheet__suggestion-name{font-variant-numeric:tabular-nums}.hub-spreadsheet__suggestion-hint{color:var(--hub-spreadsheet-readonly-color);font-size:var(--hub-spreadsheet-header-font-size)}.hub-spreadsheet__alias{margin-inline-start:.4rem;padding:0 .3rem;border:0;border-radius:.25rem;background:var(--hub-spreadsheet-alias-bg);color:var(--hub-spreadsheet-alias-color);font:inherit;font-size:var(--hub-spreadsheet-header-font-size);font-weight:400;cursor:pointer}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], states: [{ type: i0.Input, args: [{ isSignal: true, alias: "states", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], decimalMark: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalMark", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], frozenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenColumns", required: false }] }], frozenRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenRows", required: false }] }], spans: [{ type: i0.Input, args: [{ isSignal: true, alias: "spans", required: false }] }], structure: [{ type: i0.Input, args: [{ isSignal: true, alias: "structure", required: false }] }], customEditors: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubSpreadsheetEditorDirective), { isSignal: true }] }], customCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubSpreadsheetCellDirective), { isSignal: true }] }], retiredColumnKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "retiredColumnKeys", required: false }] }], fillHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHandle", required: false }] }], canUndo: [{ type: i0.Input, args: [{ isSignal: true, alias: "canUndo", required: false }] }], canRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "canRedo", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], columnWidths: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidths", required: false }] }, { type: i0.Output, args: ["columnWidthsChange"] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], mergeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "mergeable", required: false }] }], formulas: [{ type: i0.Input, args: [{ isSignal: true, alias: "formulas", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], editOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOn", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], pasted: [{ type: i0.Output, args: ["pasted"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], insertRequested: [{ type: i0.Output, args: ["insertRequested"] }], deleteRequested: [{ type: i0.Output, args: ["deleteRequested"] }], filled: [{ type: i0.Output, args: ["filled"] }], undoRequested: [{ type: i0.Output, args: ["undoRequested"] }], redoRequested: [{ type: i0.Output, args: ["redoRequested"] }], columnMoved: [{ type: i0.Output, args: ["columnMoved"] }], mergeRequested: [{ type: i0.Output, args: ["mergeRequested"] }], unmergeRequested: [{ type: i0.Output, args: ["unmergeRequested"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
+
+/**
+ * Handing the reader a file to save.
+ *
+ * Six lines that every host writes and two things they all get wrong: the object URL nobody
+ * releases, and the anchor left in the document.
+ *
+ * @param filename - What to call it.
+ * @param blob - What goes in it.
+ */
+function downloadBlob(filename, blob) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.rel = 'noopener';
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+}
+
+/**
+ * What every cell of a sheet holds, with the formulas run if asked.
+ *
+ * Shared by the exporters because both need the same answer and neither should be the one deciding
+ * it: what a cell shows is the sheet's business, and a second copy of that decision inside the CSV
+ * writer would drift from the component the first time a formula grows a new case.
+ *
+ * A formula that cannot be worked out comes out as its spreadsheet spelling — `#DIV/0!` and the
+ * rest — which is what Excel writes in the same situation and what the reader of the file expects
+ * to see.
+ */
+function sheetValues(rows, columns, options = {}) {
+    const cells = rows.map((row) => columns.map((column) => column.cell(row).value));
+    const anyFormula = columns.some((column) => column.formula) || cells.some((line) => line.some((value) => isFormula(value)));
+    if (!options.formulas || !anyFormula) {
+        return cells;
+    }
+    const places = new Map(columns.map((column, index) => [column.key, index]));
+    const sheet = evaluateSheet({
+        rows,
+        columns,
+        raw: (rowIndex, column) => cells[rowIndex]?.[places.get(column.key) ?? -1] ?? null
+    });
+    return cells.map((line, rowIndex) => line.map((value, colIndex) => {
+        const column = columns[colIndex];
+        if (!isFormula(value) && !column.formula) {
+            return value;
+        }
+        const result = sheet[rowIndex]?.[column.key];
+        return result?.failure ? formulaErrorText(result.failure) : (result?.value ?? null);
+    }));
+}
+
+/**
+ * Turns a file's rows into records keyed by column alias, matching its headers to the sheet.
+ *
+ * Matched on the header first and the alias second, both ignoring case and surrounding space: a
+ * file that came from this sheet carries the headers, and one written by hand often carries the
+ * aliases. A column the file has nothing for is left out rather than filled with an empty string,
+ * so a partial file updates what it names and leaves the rest alone.
+ *
+ * Shared by every importer, because the matching is the part that has to behave the same whatever
+ * the file was: somebody who fixes a CSV by renaming a heading expects the same file to work when
+ * they save it as a workbook instead.
+ *
+ * @returns One record per row of the file, keyed by column alias.
+ */
+function tableToRecords(table, columns) {
+    const normalise = (value) => value.trim().toLocaleLowerCase();
+    const places = new Map();
+    if (table.headers) {
+        table.headers.forEach((heading, index) => {
+            const match = columns.find((column) => normalise(column.header) === normalise(heading) || normalise(column.key) === normalise(heading));
+            if (match) {
+                places.set(index, match.key);
+            }
+        });
+    }
+    else {
+        columns.forEach((column, index) => places.set(index, column.key));
+    }
+    return table.rows.map((row) => {
+        const record = {};
+        for (const [index, alias] of places) {
+            if (row[index] !== undefined) {
+                record[alias] = row[index];
+            }
+        }
+        return record;
+    });
+}
+
+/** The separator to use when nobody said: a comma cannot separate what it also punctuates. */
+function delimiterFor(options) {
+    return options.delimiter ?? (options.decimalMark === ',' ? ';' : ',');
+}
+/** A value as it goes into the file. */
+function textOf(value, column, options) {
+    if (value === null) {
+        return '';
+    }
+    if (options.values === 'stored') {
+        return String(value);
+    }
+    const shown = displayValue(value, column);
+    // A figure is written the way this reader writes figures, or a spreadsheet opening the file
+    // reads 1.234,56 as text and quietly leaves the column out of every sum.
+    return typeof value === 'number' && options.decimalMark === ',' ? shown.replace('.', ',') : shown;
+}
+/**
+ * Writes a sheet as CSV.
+ *
+ * @param rows - The rows, as the sheet has them.
+ * @param columns - The columns, which decide the order and the headers.
+ * @param options - How to write it.
+ * @returns The file's contents.
+ */
+function sheetToCsv(rows, columns, options = {}) {
+    const delimiter = delimiterFor(options);
+    const lines = [];
+    if (options.headers !== false) {
+        lines.push(columns.map((column) => column.header));
+    }
+    const values = sheetValues(rows, columns, { formulas: options.values !== 'stored' && options.formulas !== false });
+    for (const line of values) {
+        lines.push(line.map((value, index) => textOf(value, columns[index], options)));
+    }
+    return serialiseDelimited(lines, delimiter, options.newline ?? '\r\n');
+}
+/**
+ * Which separator a file is written with.
+ *
+ * Counted on the first line rather than guessed from the file's name: an exporter's idea of CSV
+ * and the reader's locale often disagree, and the line that holds the headers is the one that
+ * shows it most clearly.
+ */
+function sniffDelimiter(text) {
+    const firstLine = text.split(/\r?\n/, 1)[0] ?? '';
+    const counts = [
+        [',', (firstLine.match(/,/g) ?? []).length],
+        [';', (firstLine.match(/;/g) ?? []).length],
+        ['\t', (firstLine.match(/\t/g) ?? []).length]
+    ];
+    return counts.sort((a, b) => b[1] - a[1])[0][1] > 0 ? counts[0][0] : ',';
+}
+/**
+ * Reads a CSV file.
+ *
+ * @param text - The file's contents.
+ * @param options - How to read it; the separator is sniffed when not given.
+ */
+function csvToTable(text, options = {}) {
+    const rows = parseDelimited(text, options.delimiter ?? sniffDelimiter(text));
+    if (options.headers === false || !rows.length) {
+        return { headers: null, rows };
+    }
+    return { headers: rows[0], rows: rows.slice(1) };
+}
+/**
+ * Reads a CSV file into rows keyed by column alias, matching its headers to the sheet's columns.
+ *
+ * @returns One record per row of the file, keyed by column alias.
+ */
+function csvToRecords(text, columns, options = {}) {
+    return tableToRecords(csvToTable(text, options), columns);
+}
+/**
+ * Hands the reader a CSV file to save.
+ *
+ * @param filename - What to call it.
+ * @param text - What goes in it.
+ * @param type - Its media type.
+ */
+function downloadText(filename, text, type = 'text/csv;charset=utf-8') {
+    // The mark is what tells a spreadsheet the file is UTF-8. Without it an accented word opens as
+    // two characters of nonsense, and the reader blames whoever exported it.
+    const contents = type.startsWith('text/csv') ? '\ufeff' + text : text;
+    downloadBlob(filename, new Blob([contents], { type }));
+}
+
+/**
+ * A zip file, written by hand.
+ *
+ * An xlsx is a zip of XML, and this is the part of that sentence that usually drags a library in.
+ * It does not have to: the entries are **stored** rather than deflated, which the format has
+ * allowed since the beginning and every reader supports, and what is left is a checksum and three
+ * fixed-shape records. A spreadsheet of a few thousand cells makes a file a couple of times bigger
+ * than a compressed one would be — against a dependency of some hundreds of kilobytes that every
+ * consumer of the library would pay for whether they export anything or not.
+ */
+/** The table CRC-32 needs, worked out once. */
+const CRC_TABLE = (() => {
+    const table = new Uint32Array(256);
+    for (let index = 0; index < 256; index++) {
+        let value = index;
+        for (let bit = 0; bit < 8; bit++) {
+            value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;
+        }
+        table[index] = value >>> 0;
+    }
+    return table;
+})();
+/** The checksum a zip entry carries, which a reader uses to know the bytes arrived whole. */
+function crc32(bytes) {
+    let crc = 0xffffffff;
+    for (const byte of bytes) {
+        crc = CRC_TABLE[(crc ^ byte) & 0xff] ^ (crc >>> 8);
+    }
+    return (crc ^ 0xffffffff) >>> 0;
+}
+/** Writes little-endian numbers into a buffer, which is all a zip header is. */
+function writer(size) {
+    const bytes = new Uint8Array(size);
+    let at = 0;
+    return {
+        bytes,
+        u16(value) {
+            bytes[at++] = value & 0xff;
+            bytes[at++] = (value >>> 8) & 0xff;
+        },
+        u32(value) {
+            bytes[at++] = value & 0xff;
+            bytes[at++] = (value >>> 8) & 0xff;
+            bytes[at++] = (value >>> 16) & 0xff;
+            bytes[at++] = (value >>> 24) & 0xff;
+        },
+        raw(source) {
+            bytes.set(source, at);
+            at += source.length;
+        }
+    };
+}
+/**
+ * Packs a set of files into a zip archive.
+ *
+ * Everything is stored rather than compressed, and dated to a fixed moment: a file that changes
+ * every time it is written for no reason other than the clock is a file that cannot be compared
+ * with the one from yesterday.
+ *
+ * @param entries - What goes in it.
+ * @returns The bytes of the archive.
+ */
+function zip(entries) {
+    const encoder = new TextEncoder();
+    const parts = [];
+    const directory = [];
+    let offset = 0;
+    // 1 January 1980, which is the earliest a zip can say and the only honest answer when the
+    // contents did not come from a file with a date of its own.
+    const time = 0;
+    const date = 33;
+    for (const entry of entries) {
+        const name = encoder.encode(entry.path);
+        const data = typeof entry.data === 'string' ? encoder.encode(entry.data) : entry.data;
+        const checksum = crc32(data);
+        const local = writer(30 + name.length);
+        local.u32(0x04034b50);
+        local.u16(20);
+        local.u16(0);
+        local.u16(0);
+        local.u16(time);
+        local.u16(date);
+        local.u32(checksum);
+        local.u32(data.length);
+        local.u32(data.length);
+        local.u16(name.length);
+        local.u16(0);
+        local.raw(name);
+        parts.push(local.bytes, data);
+        const central = writer(46 + name.length);
+        central.u32(0x02014b50);
+        central.u16(20);
+        central.u16(20);
+        central.u16(0);
+        central.u16(0);
+        central.u16(time);
+        central.u16(date);
+        central.u32(checksum);
+        central.u32(data.length);
+        central.u32(data.length);
+        central.u16(name.length);
+        central.u16(0);
+        central.u16(0);
+        central.u16(0);
+        central.u16(0);
+        central.u32(0);
+        central.u32(offset);
+        central.raw(name);
+        directory.push(central.bytes);
+        offset += local.bytes.length + data.length;
+    }
+    const directorySize = directory.reduce((total, record) => total + record.length, 0);
+    const end = writer(22);
+    end.u32(0x06054b50);
+    end.u16(0);
+    end.u16(0);
+    end.u16(entries.length);
+    end.u16(entries.length);
+    end.u32(directorySize);
+    end.u32(offset);
+    end.u16(0);
+    const all = [...parts, ...directory, end.bytes];
+    const size = all.reduce((total, part) => total + part.length, 0);
+    const archive = new Uint8Array(size);
+    let at = 0;
+    for (const part of all) {
+        archive.set(part, at);
+        at += part.length;
+    }
+    return archive;
+}
+
+/** The media type a browser and Excel both recognise. */
+const XLSX_MEDIA_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+/** What the day numbers are counted from: 30 December 1899, which is Excel's zero. */
+const EXCEL_EPOCH$1 = Date.UTC(1899, 11, 30);
+/** Style slots, in the order `styles.xml` declares them. */
+const STYLE_PLAIN = 0;
+const STYLE_HEADER = 1;
+const STYLE_DATE = 2;
+/** XML has five characters that cannot be written as themselves, and one that must not be written at all. */
+function escapeXml(value) {
+    return value
+        .replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f]/g, '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+/** A column's letter, as a spreadsheet names it: A, B, … Z, AA. */
+function letter(index) {
+    let name = '';
+    let rest = index;
+    do {
+        name = String.fromCharCode(65 + (rest % 26)) + name;
+        rest = Math.floor(rest / 26) - 1;
+    } while (rest >= 0);
+    return name;
+}
+/**
+ * A date as the number of days since Excel's zero, or null when the text is not a date.
+ *
+ * Only whole days and only the ISO shape, which is what a date column of this sheet holds. A
+ * string that merely looks date-ish — `2024` — is left as text on purpose: guessing wrong turns a
+ * catalogue number into a Tuesday.
+ */
+function dateSerial(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+    if (!match) {
+        return null;
+    }
+    const stamp = Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+    return Number.isNaN(stamp) ? null : Math.round((stamp - EXCEL_EPOCH$1) / 86_400_000);
+}
+/** One cell, as the worksheet spells it. */
+function cellXml(reference, value, column, options) {
+    if (value === null || value === '') {
+        return '';
+    }
+    if (typeof value === 'number') {
+        return `<c r="${reference}"><v>${value}</v></c>`;
+    }
+    if (column?.kind === 'date') {
+        const serial = dateSerial(value);
+        if (serial !== null) {
+            return `<c r="${reference}" s="${STYLE_DATE}"><v>${serial}</v></c>`;
+        }
+    }
+    // What the reader saw, not the code underneath: a select cell exports the label somebody chose.
+    // `values: 'stored'` is the round trip, and there the stored value is the point.
+    const text = options.values === 'stored' || !column ? value : displayValue(value, column);
+    // Inline rather than through the shared-strings table. A workbook of a few thousand cells does
+    // not care about the repetition, and the table is a second part to keep in step for nothing.
+    return `<c r="${reference}" t="inlineStr"><is><t xml:space="preserve">${escapeXml(text)}</t></is></c>`;
+}
+/** A sheet name Excel will accept: no more than 31 characters and none of its reserved ones. */
+function sheetNameOf(name) {
+    const clean = (name ?? 'Sheet1').replace(/[\\/?*[\]:]/g, ' ').trim();
+    return clean ? clean.slice(0, 31) : 'Sheet1';
+}
+/** The parts of the workbook that never change. */
+const CONTENT_TYPES = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/><Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/></Types>`;
+const ROOT_RELS = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/></Relationships>`;
+const WORKBOOK_RELS = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>`;
+/** Three slots: plain, a bold header, and a date. Everything else is Excel's default. */
+const STYLES = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><numFmts count="1"><numFmt numFmtId="164" formatCode="yyyy\\-mm\\-dd"/></numFmts><fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts><fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills><borders count="1"><border/></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="3"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="1" fillId="0" borderId="0" xfId="0" applyFont="1"/><xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/></cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles></styleSheet>`;
+/**
+ * Writes a sheet as an xlsx workbook.
+ *
+ * @param rows - The rows, as the sheet has them.
+ * @param columns - The columns, which decide the order and the headers.
+ * @param options - How to write it.
+ * @returns The bytes of the file.
+ */
+function sheetToXlsx(rows, columns, options = {}) {
+    const values = sheetValues(rows, columns, { formulas: options.values !== 'stored' && options.formulas !== false });
+    const withHeaders = options.headers !== false;
+    const lines = [];
+    if (withHeaders) {
+        const cells = columns
+            .map((column, index) => `<c r="${letter(index)}1" s="${STYLE_HEADER}" t="inlineStr"><is><t xml:space="preserve">${escapeXml(column.header)}</t></is></c>`)
+            .join('');
+        lines.push(`<row r="1">${cells}</row>`);
+    }
+    values.forEach((line, rowIndex) => {
+        const number = rowIndex + (withHeaders ? 2 : 1);
+        const cells = line.map((value, index) => cellXml(`${letter(index)}${number}`, value, columns[index], options)).join('');
+        lines.push(`<row r="${number}">${cells}</row>`);
+    });
+    const last = `${letter(Math.max(columns.length - 1, 0))}${Math.max(lines.length, 1)}`;
+    const sheet = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><dimension ref="A1:${last}"/><sheetData>${lines.join('')}</sheetData></worksheet>`;
+    const workbook = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="${escapeXml(sheetNameOf(options.sheetName))}" sheetId="1" r:id="rId1"/></sheets></workbook>`;
+    // `[Content_Types].xml` goes first because that is where a reader looks first, and several
+    // older ones will not look anywhere else for it.
+    return zip([
+        { path: '[Content_Types].xml', data: CONTENT_TYPES },
+        { path: '_rels/.rels', data: ROOT_RELS },
+        { path: 'xl/workbook.xml', data: workbook },
+        { path: 'xl/_rels/workbook.xml.rels', data: WORKBOOK_RELS },
+        { path: 'xl/styles.xml', data: STYLES },
+        { path: 'xl/worksheets/sheet1.xml', data: sheet }
+    ]);
+}
+/**
+ * Hands the reader an xlsx file to save.
+ *
+ * @param filename - What to call it; `.xlsx` is added when missing.
+ * @param bytes - The workbook, from `sheetToXlsx`.
+ */
+function downloadXlsx(filename, bytes) {
+    const name = /\.xlsx$/i.test(filename) ? filename : `${filename}.xlsx`;
+    downloadBlob(name, new Blob([bytes], { type: XLSX_MEDIA_TYPE }));
+}
+
+/**
+ * Reading a zip archive, which is what an xlsx is.
+ *
+ * The writing side got away without compressing anything. Reading cannot: a workbook that came out
+ * of Excel has every part deflated, and refusing those would mean refusing every real file. What
+ * makes it possible without a dependency is that the platform already has the decompressor —
+ * `DecompressionStream`, in every browser since 2023 and in Node since 18 — so all that is left is
+ * the bookkeeping: find the directory at the end of the file, and for each entry work out where its
+ * bytes start.
+ *
+ * Only the two storage methods that exist in practice are understood, stored and deflated. An
+ * entry compressed any other way is left out rather than guessed at, and the caller sees a part it
+ * asked for missing instead of a page of nonsense.
+ */
+/** Where a reader looks for the directory: the last record in the file. */
+const END_OF_DIRECTORY = 0x06054b50;
+const DIRECTORY_ENTRY = 0x02014b50;
+/** Reads little-endian numbers, which is the only way a zip states a length. */
+function reader(bytes) {
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    return {
+        u16: (at) => view.getUint16(at, true),
+        u32: (at) => view.getUint32(at, true)
+    };
+}
+/**
+ * Undoes a deflated entry, with the decompressor the platform already has.
+ *
+ * Written against the stream reader directly rather than through `Blob` or `Response`, which are
+ * the shorter spellings and are not there everywhere this runs.
+ */
+async function inflate(bytes) {
+    const stream = new DecompressionStream('deflate-raw');
+    const writer = stream.writable.getWriter();
+    // The cast is TypeScript's business, not the runtime's: a `Uint8Array` may sit on a shared
+    // buffer as far as the types are concerned, and a stream writer will not say so.
+    void writer.write(bytes).then(() => writer.close());
+    const reader = stream.readable.getReader();
+    const chunks = [];
+    let size = 0;
+    for (;;) {
+        const { done, value } = await reader.read();
+        if (done) {
+            break;
+        }
+        chunks.push(value);
+        size += value.length;
+    }
+    const whole = new Uint8Array(size);
+    let at = 0;
+    for (const chunk of chunks) {
+        whole.set(chunk, at);
+        at += chunk.length;
+    }
+    return whole;
+}
+/**
+ * Takes an archive apart.
+ *
+ * @param bytes - The whole file.
+ * @returns Each entry's contents, by its path inside the archive.
+ * @throws When the file is not a zip at all, which for an xlsx means it is not a workbook.
+ */
+async function unzip(bytes) {
+    const { u16, u32 } = reader(bytes);
+    let end = -1;
+    // Backwards from the end, because the record that says where everything is may be followed by
+    // a comment of any length up to 64k.
+    for (let at = bytes.length - 22; at >= 0 && at >= bytes.length - 22 - 0xffff; at--) {
+        if (u32(at) === END_OF_DIRECTORY) {
+            end = at;
+            break;
+        }
+    }
+    if (end < 0) {
+        throw new Error('Not a zip archive: no end-of-directory record.');
+    }
+    const count = u16(end + 10);
+    const files = new Map();
+    let at = u32(end + 16);
+    for (let index = 0; index < count && u32(at) === DIRECTORY_ENTRY; index++) {
+        const method = u16(at + 10);
+        const compressed = u32(at + 20);
+        const nameLength = u16(at + 28);
+        const extraLength = u16(at + 30);
+        const commentLength = u16(at + 32);
+        const localAt = u32(at + 42);
+        const path = new TextDecoder().decode(bytes.subarray(at + 46, at + 46 + nameLength));
+        // The local header repeats the name and carries extra fields of its own length, so where
+        // the data starts can only be read there — not worked out from the directory entry.
+        const localNameLength = u16(localAt + 26);
+        const localExtraLength = u16(localAt + 28);
+        const from = localAt + 30 + localNameLength + localExtraLength;
+        const raw = bytes.subarray(from, from + compressed);
+        if (method === 0) {
+            files.set(path, raw);
+        }
+        else if (method === 8) {
+            files.set(path, await inflate(raw));
+        }
+        at += 46 + nameLength + extraLength + commentLength;
+    }
+    return files;
+}
+
+/** Number formats that mean a date, as the format numbers them. */
+const DATE_FORMAT_IDS = new Set([
+    14, 15, 16, 17, 18, 19, 20, 21, 22, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 45, 46, 47, 50, 51, 52, 53, 54, 55, 56, 57, 58
+]);
+/** What Excel counts its days from. */
+const EXCEL_EPOCH = Date.UTC(1899, 11, 30);
+const decoder = new TextDecoder();
+/** Undoes the five escapes XML writes, which is all these parts contain. */
+function unescapeXml(value) {
+    return value
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&apos;/g, "'")
+        .replace(/&#(\d+);/g, (_, code) => String.fromCodePoint(Number(code)))
+        .replace(/&amp;/g, '&');
+}
+/** A column letter back to its place: A is 0, AA is 26. */
+function columnAt(reference) {
+    const letters = /^([A-Z]+)/.exec(reference)?.[1] ?? 'A';
+    let index = 0;
+    for (const letter of letters) {
+        index = index * 26 + (letter.charCodeAt(0) - 64);
+    }
+    return index - 1;
+}
+/** Every `<si>` of the shared-string table, in order, runs of formatting joined back together. */
+function sharedStrings(xml) {
+    if (!xml) {
+        return [];
+    }
+    return [...xml.matchAll(/<si>([\s\S]*?)<\/si>/g)].map((item) => [...item[1].matchAll(/<t[^>]*>([\s\S]*?)<\/t>/g)].map((piece) => unescapeXml(piece[1])).join(''));
+}
+/** Which style slots mean a date, worked out from the number format each one points at. */
+function dateStyles(xml) {
+    const dates = new Set();
+    if (!xml) {
+        return dates;
+    }
+    const custom = new Map();
+    for (const format of xml.matchAll(/<numFmt[^>]*numFmtId="(\d+)"[^>]*formatCode="([^"]*)"/g)) {
+        custom.set(Number(format[1]), unescapeXml(format[2]));
+    }
+    const cellXfs = /<cellXfs[^>]*>([\s\S]*?)<\/cellXfs>/.exec(xml)?.[1] ?? '';
+    [...cellXfs.matchAll(/<xf[^>]*\/?>/g)].forEach((slot, index) => {
+        const id = Number(/numFmtId="(\d+)"/.exec(slot[0])?.[1] ?? 0);
+        if (DATE_FORMAT_IDS.has(id)) {
+            dates.add(index);
+            return;
+        }
+        // A custom format is a date when it says so: day, month or year outside quoted text. The
+        // stripping matters — `"day "0` is a label, not a date.
+        const code = custom.get(id);
+        if (code && /[ymd]/i.test(code.replace(/"[^"]*"/g, '').replace(/\[[^\]]*\]/g, ''))) {
+            dates.add(index);
+        }
+    });
+    return dates;
+}
+/** A day count as an ISO date, which is what a date column of this sheet holds. */
+function isoDate(serial) {
+    return new Date(EXCEL_EPOCH + Math.round(serial) * 86_400_000).toISOString().slice(0, 10);
+}
+/** Which worksheet part to read, following the workbook's own list rather than guessing at a name. */
+function worksheetPath(files, sheetName) {
+    const workbook = files.has('xl/workbook.xml') ? decoder.decode(files.get('xl/workbook.xml')) : '';
+    const rels = files.has('xl/_rels/workbook.xml.rels') ? decoder.decode(files.get('xl/_rels/workbook.xml.rels')) : '';
+    const sheets = [...workbook.matchAll(/<sheet\s[^>]*\/?>/g)].map((sheet) => ({
+        name: unescapeXml(/name="([^"]*)"/.exec(sheet[0])?.[1] ?? ''),
+        rel: /r:id="([^"]*)"/.exec(sheet[0])?.[1] ?? ''
+    }));
+    const wanted = sheetName ? sheets.find((sheet) => sheet.name === sheetName) : sheets[0];
+    const target = wanted ? new RegExp(`<Relationship[^>]*Id="${wanted.rel}"[^>]*Target="([^"]*)"`).exec(rels)?.[1] : undefined;
+    if (target) {
+        const path = target.replace(/^\/?xl\//, '').replace(/^\//, '');
+        if (files.has(`xl/${path}`)) {
+            return `xl/${path}`;
+        }
+    }
+    // A workbook whose relationships could not be followed still has its sheets where everyone
+    // puts them. Better to read the file than to refuse it over a part nobody will ever look at.
+    return [...files.keys()].find((path) => path.startsWith('xl/worksheets/') && path.endsWith('.xml'));
+}
+/**
+ * Reads a workbook's first sheet as a table of text.
+ *
+ * @param bytes - The whole file, as it was read or dropped.
+ * @param options - How to read it.
+ * @returns The headers, if it has them, and every row.
+ * @throws When the file is not a workbook at all.
+ */
+async function xlsxToTable(bytes, options = {}) {
+    const files = await unzip(bytes);
+    const path = worksheetPath(files, options.sheetName);
+    if (!path) {
+        throw new Error('Not an xlsx workbook: no worksheet inside it.');
+    }
+    const strings = sharedStrings(files.has('xl/sharedStrings.xml') ? decoder.decode(files.get('xl/sharedStrings.xml')) : undefined);
+    const dates = dateStyles(files.has('xl/styles.xml') ? decoder.decode(files.get('xl/styles.xml')) : undefined);
+    const sheet = decoder.decode(files.get(path));
+    const rows = [];
+    for (const row of sheet.matchAll(/<row[^>]*>([\s\S]*?)<\/row>/g)) {
+        const line = [];
+        for (const cell of row[1].matchAll(/<c(\s[^>]*)>([\s\S]*?)<\/c>/g)) {
+            const attributes = cell[1];
+            const at = columnAt(/r="([A-Z]+)/.exec(attributes)?.[1] ?? '');
+            const type = /t="([^"]*)"/.exec(attributes)?.[1] ?? 'n';
+            const style = Number(/s="(\d+)"/.exec(attributes)?.[1] ?? -1);
+            const value = /<v>([\s\S]*?)<\/v>/.exec(cell[2])?.[1];
+            let text = '';
+            if (type === 's') {
+                text = strings[Number(value ?? -1)] ?? '';
+            }
+            else if (type === 'inlineStr') {
+                text = [...cell[2].matchAll(/<t[^>]*>([\s\S]*?)<\/t>/g)].map((piece) => unescapeXml(piece[1])).join('');
+            }
+            else if (type === 'b') {
+                text = value === '1' ? 'true' : 'false';
+            }
+            else if (value !== undefined) {
+                const number = Number(value);
+                text = dates.has(style) && Number.isFinite(number) ? isoDate(number) : unescapeXml(value);
+            }
+            // Cells are absent where they are empty, so the gaps have to be filled or every value
+            // after the first empty cell lands in the wrong column.
+            while (line.length < at) {
+                line.push('');
+            }
+            line[at] = text;
+        }
+        rows.push(line);
+    }
+    if (options.headers === false || !rows.length) {
+        return { headers: null, rows };
+    }
+    return { headers: rows[0], rows: rows.slice(1) };
+}
+/**
+ * Reads a workbook into rows keyed by column alias, matching its headers to the sheet's columns.
+ *
+ * @returns One record per row of the file, keyed by column alias.
+ */
+async function xlsxToRecords(bytes, columns, options = {}) {
+    return tableToRecords(await xlsxToTable(bytes, options), columns);
+}
+
+/**
+ * Registers the control adapter a sheet opens its list cells with.
+ *
+ * ```ts
+ * import { provideHubSpreadsheetControls } from 'ng-hub-ui-spreadsheet';
+ * import { hubFormControlAdapter } from 'ng-hub-ui-forms';
+ *
+ * providers: [provideHubSpreadsheetControls(hubFormControlAdapter)];
+ * ```
+ *
+ * Every list column then opens with that control, with no template written per sheet. A single
+ * column that needs something else still overrides it with `hubSpreadsheetEditor`, which wins.
+ *
+ * @param adapter - The implementation to use, e.g. `hubFormControlAdapter` from `ng-hub-ui-forms`.
+ * @returns Providers to add to the application, or to one component.
+ */
+function provideHubSpreadsheetControls(adapter) {
+    return makeEnvironmentProviders([
+        {
+            provide: HUB_SPREADSHEET_CONTROLS,
+            useValue: adapter
+        }
+    ]);
+}
+
+/** English dictionary for the spreadsheet's own labels. */
+const locale$7 = {
+    lang: 'en',
+    data: {
+        INSERT_ROW_ABOVE: 'Insert row above',
+        INSERT_ROW_BELOW: 'Insert row below',
+        DELETE_ROWS: 'Delete {{ count }} row(s)',
+        INSERT_COLUMN_BEFORE: 'Insert column before',
+        INSERT_COLUMN_AFTER: 'Insert column after',
+        DELETE_COLUMNS: 'Delete {{ count }} column(s)',
+        MERGE_CELLS: 'Merge {{ count }} cells',
+        UNMERGE_CELLS: 'Split {{ count }} block(s)',
+        ROW_ACTIONS: 'Row and column actions'
+    }
+};
+
+/** Spanish dictionary for the spreadsheet's own labels. */
+const locale$6 = {
+    lang: 'es',
+    data: {
+        INSERT_ROW_ABOVE: 'Insertar fila encima',
+        INSERT_ROW_BELOW: 'Insertar fila debajo',
+        DELETE_ROWS: 'Borrar {{ count }} fila(s)',
+        INSERT_COLUMN_BEFORE: 'Insertar columna antes',
+        INSERT_COLUMN_AFTER: 'Insertar columna después',
+        DELETE_COLUMNS: 'Borrar {{ count }} columna(s)',
+        MERGE_CELLS: 'Combinar {{ count }} celdas',
+        UNMERGE_CELLS: 'Separar {{ count }} bloque(s)',
+        ROW_ACTIONS: 'Acciones de filas y columnas'
+    }
+};
+
+/** French dictionary for the spreadsheet's own labels. */
+const locale$5 = {
+    lang: 'fr',
+    data: {
+        INSERT_ROW_ABOVE: 'Insérer une ligne au-dessus',
+        INSERT_ROW_BELOW: 'Insérer une ligne en dessous',
+        DELETE_ROWS: 'Supprimer {{ count }} ligne(s)',
+        INSERT_COLUMN_BEFORE: 'Insérer une colonne avant',
+        INSERT_COLUMN_AFTER: 'Insérer une colonne après',
+        DELETE_COLUMNS: 'Supprimer {{ count }} colonne(s)',
+        MERGE_CELLS: 'Fusionner {{ count }} cellules',
+        UNMERGE_CELLS: 'Séparer {{ count }} bloc(s)',
+        ROW_ACTIONS: 'Actions sur lignes et colonnes'
+    }
+};
+
+/** German dictionary for the spreadsheet's own labels. */
+const locale$4 = {
+    lang: 'de',
+    data: {
+        INSERT_ROW_ABOVE: 'Zeile darüber einfügen',
+        INSERT_ROW_BELOW: 'Zeile darunter einfügen',
+        DELETE_ROWS: '{{ count }} Zeile(n) löschen',
+        INSERT_COLUMN_BEFORE: 'Spalte davor einfügen',
+        INSERT_COLUMN_AFTER: 'Spalte danach einfügen',
+        DELETE_COLUMNS: '{{ count }} Spalte(n) löschen',
+        MERGE_CELLS: '{{ count }} Zellen verbinden',
+        UNMERGE_CELLS: '{{ count }} Block/Blöcke trennen',
+        ROW_ACTIONS: 'Aktionen für Zeilen und Spalten'
+    }
+};
+
+/** Russian dictionary for the spreadsheet's own labels. */
+const locale$3 = {
+    lang: 'ru',
+    data: {
+        INSERT_ROW_ABOVE: 'Вставить строку выше',
+        INSERT_ROW_BELOW: 'Вставить строку ниже',
+        DELETE_ROWS: 'Удалить строк: {{ count }}',
+        INSERT_COLUMN_BEFORE: 'Вставить столбец слева',
+        INSERT_COLUMN_AFTER: 'Вставить столбец справа',
+        DELETE_COLUMNS: 'Удалить столбцов: {{ count }}',
+        MERGE_CELLS: 'Объединить {{ count }} ячеек',
+        UNMERGE_CELLS: 'Разделить {{ count }} блок(ов)',
+        ROW_ACTIONS: 'Действия со строками и столбцами'
+    }
+};
+
+/** Japanese dictionary for the spreadsheet's own labels. */
+const locale$2 = {
+    lang: 'ja',
+    data: {
+        INSERT_ROW_ABOVE: '上に行を挿入',
+        INSERT_ROW_BELOW: '下に行を挿入',
+        DELETE_ROWS: '{{ count }} 行を削除',
+        INSERT_COLUMN_BEFORE: '左に列を挿入',
+        INSERT_COLUMN_AFTER: '右に列を挿入',
+        DELETE_COLUMNS: '{{ count }} 列を削除',
+        MERGE_CELLS: '{{ count }} 個のセルを結合',
+        UNMERGE_CELLS: '{{ count }} 個の結合を解除',
+        ROW_ACTIONS: '行と列の操作'
+    }
+};
+
+/** Chinese dictionary for the spreadsheet's own labels. */
+const locale$1 = {
+    lang: 'zh',
+    data: {
+        INSERT_ROW_ABOVE: '在上方插入行',
+        INSERT_ROW_BELOW: '在下方插入行',
+        DELETE_ROWS: '删除 {{ count }} 行',
+        INSERT_COLUMN_BEFORE: '在左侧插入列',
+        INSERT_COLUMN_AFTER: '在右侧插入列',
+        DELETE_COLUMNS: '删除 {{ count }} 列',
+        MERGE_CELLS: '合并 {{ count }} 个单元格',
+        UNMERGE_CELLS: '拆分 {{ count }} 个合并块',
+        ROW_ACTIONS: '行与列操作'
+    }
+};
+
+/** Arabic dictionary for the spreadsheet's own labels. */
+const locale = {
+    lang: 'ar',
+    data: {
+        INSERT_ROW_ABOVE: 'إدراج صف أعلى',
+        INSERT_ROW_BELOW: 'إدراج صف أسفل',
+        DELETE_ROWS: 'حذف {{ count }} صف',
+        INSERT_COLUMN_BEFORE: 'إدراج عمود قبل',
+        INSERT_COLUMN_AFTER: 'إدراج عمود بعد',
+        DELETE_COLUMNS: 'حذف {{ count }} عمود',
+        MERGE_CELLS: 'دمج {{ count }} خلية',
+        UNMERGE_CELLS: 'فصل {{ count }} كتلة',
+        ROW_ACTIONS: 'إجراءات الصفوف والأعمدة'
+    }
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FORMULA_ERRORS, FORMULA_ERROR_TEXT, HUB_FORMULA_FUNCTIONS, HUB_SPREADSHEET_CONTROLS, HubSpreadsheetCellDirective, HubSpreadsheetComponent, HubSpreadsheetControlDirective, HubSpreadsheetEditorDirective, XLSX_MEDIA_TYPE, applySpanMerge, applySpanUnmerge, applySuggestion, locale as arSpreadsheetLocale, columnIndexOf, columnLabel, csvToRecords, csvToTable, danglingColumnKeys, locale$4 as deSpreadsheetLocale, displayValue, downloadText, downloadXlsx, duplicateColumnKeys, locale$7 as enSpreadsheetLocale, locale$6 as esSpreadsheetLocale, evaluateFormula, evaluateSheet, formatCoordinate, formulaErrorText, formulaFragment, locale$5 as frSpreadsheetLocale, isFormula, isStructureAllowed, isTruthy, locale$2 as jaSpreadsheetLocale, mergeRequestFor, moveCoordinate, nextColumnKey, optionFor, parseClipboardTable, parseCoordinate, parseDecimal, parseForColumn, parseFormula, provideHubSpreadsheetControls, resolveInsertIndex, rewriteCoordinates, rewriteRowFormulas, locale$3 as ruSpreadsheetLocale, serialiseClipboardTable, sheetToCsv, sheetToXlsx, sheetValues, sniffDelimiter, spansWithin, spreadsheetRecord, spreadsheetRecords, suggestFormula, tableToRecords, xlsxToRecords, xlsxToTable, locale$1 as zhSpreadsheetLocale };
+//# sourceMappingURL=ng-hub-ui-spreadsheet.mjs.map