ng-hub-ui-spreadsheet 22.0.0 → 22.4.0

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

@@ -1,7 +1,7 @@
 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';
+import { input, inject, TemplateRef, Directive, InjectionToken, ViewContainerRef, afterNextRender, ElementRef, Injector, DestroyRef, computed, signal, afterRenderEffect, booleanAttribute, contentChildren, model, output, viewChild, effect, untracked, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
+import { buildSpanMap, gridWindow, growWindowToSpans, gridRangeBetween, clampGridRange, coversRange, clampGridSelection, addGridRange, isCovered, spanAt, isWithinGridSelection, isWithinGridRange, gridCellTabIndex, moveGridFocus, resolveGridIntent, resolveGridEdge, gridSelectionTable, anchorOf, gridSelectionCells, TranslatePipe, HUB_TRANSLATION_PREFIX } from 'ng-hub-ui-utils';
 
 /**
  * Reading a sheet back as plain data, keyed by column alias.
@@ -522,13 +522,23 @@ class HubSpreadsheetCellDirective {
      * ```
      */
     rows = input([], { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), alias: 'hubSpreadsheetCellRows' });
+    /**
+     * The accessible name of the way in, when the cells of this column open onto something rather
+     * than being typed into.
+     *
+     * Given, the sheet keeps `Enter` for the cell instead of opening an editor the cell has not
+     * got, and reports the press through `opened`; the template draws the way in itself — a link,
+     * a button — and calls `open()` from its context. Left out, the cell is only read or typed
+     * into, and `Enter` does what the sheet would have done on its own.
+     */
+    action = input('', { ...(ngDevMode ? { debugName: "action" } : /* istanbul ignore next */ {}), alias: 'hubSpreadsheetCellAction' });
     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 });
+    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 }, action: { classPropertyName: "action", publicName: "hubSpreadsheetCellAction", 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,
@@ -536,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     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 }] }] } });
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetCell", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetCellRows", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubSpreadsheetCellAction", required: false }] }] } });
 
 /**
  * Resizing and reordering columns, as arithmetic on their own.
@@ -1789,6 +1799,143 @@ function applySuggestion(draft, suggestion, caret = draft.length) {
     return { draft: before + insert + trailing, caret: before.length + insert.length };
 }
 
+const OPERATORS = ['<>', '<=', '>=', '+', '-', '*', '/', '^', '&', '=', '<', '>'];
+const NUMBER = /^[0-9]*\.?[0-9]+(?:[eE][+-]?[0-9]+)?/;
+const NAME = /^[A-Za-z_][A-Za-z0-9_.]*/;
+/** The next character that is not a space, from a position. */
+function nextSignificant(source, from) {
+    let index = from;
+    while (index < source.length && /\s/.test(source[index])) {
+        index++;
+    }
+    return index;
+}
+/**
+ * Names every piece of a formula.
+ *
+ * @param source - The text, `=` and all, as the reader is typing it.
+ * @returns The tokens in order, which joined back up are `source` again.
+ */
+function tokenizeFormula(source) {
+    const tokens = [];
+    let index = 0;
+    let leading = true;
+    while (index < source.length) {
+        const char = source[index];
+        if (/\s/.test(char)) {
+            const end = nextSignificant(source, index);
+            tokens.push({ kind: 'space', text: source.slice(index, end) });
+            index = end;
+            continue;
+        }
+        // Only the first `=` opens the formula; every other one is a comparison.
+        if (char === '=' && leading) {
+            tokens.push({ kind: 'equals', text: '=' });
+            index++;
+            leading = false;
+            continue;
+        }
+        leading = false;
+        // A column, brackets and all. An unclosed one is left plain rather than guessed at.
+        if (char === '[') {
+            const end = source.indexOf(']', index);
+            if (end < 0) {
+                tokens.push({ kind: 'plain', text: source.slice(index) });
+                break;
+            }
+            tokens.push({ kind: 'column', text: source.slice(index, end + 1) });
+            index = end + 1;
+            continue;
+        }
+        // A quoted string, doubled quotes and all. Unterminated stays plain.
+        if (char === '"') {
+            let end = index + 1;
+            let closed = false;
+            while (end < source.length) {
+                if (source[end] === '"') {
+                    if (source[end + 1] === '"') {
+                        end += 2;
+                        continue;
+                    }
+                    end++;
+                    closed = true;
+                    break;
+                }
+                end++;
+            }
+            tokens.push({ kind: closed ? 'text' : 'plain', text: source.slice(index, end) });
+            index = end;
+            continue;
+        }
+        if (/[0-9.]/.test(char)) {
+            const match = NUMBER.exec(source.slice(index));
+            if (!match) {
+                tokens.push({ kind: 'plain', text: char });
+                index++;
+                continue;
+            }
+            tokens.push({ kind: 'number', text: match[0] });
+            index += match[0].length;
+            continue;
+        }
+        if (/[A-Za-z_]/.test(char)) {
+            const match = NAME.exec(source.slice(index));
+            const name = match[0];
+            const upper = name.toUpperCase();
+            if (upper === 'TRUE' || upper === 'FALSE') {
+                tokens.push({ kind: 'boolean', text: name });
+                index += name.length;
+                continue;
+            }
+            if (parseCoordinate(name)) {
+                // A rectangle reads as one reference, not as two places with a colon between them.
+                const colon = nextSignificant(source, index + name.length);
+                if (source[colon] === ':') {
+                    const far = nextSignificant(source, colon + 1);
+                    const next = NAME.exec(source.slice(far));
+                    if (next && parseCoordinate(next[0])) {
+                        const end = far + next[0].length;
+                        tokens.push({ kind: 'coordinate', text: source.slice(index, end) });
+                        index = end;
+                        continue;
+                    }
+                }
+                tokens.push({ kind: 'coordinate', text: name });
+                index += name.length;
+                continue;
+            }
+            // A function is a name that opens a bracket, however much space is between them.
+            if (source[nextSignificant(source, index + name.length)] === '(') {
+                tokens.push({ kind: 'function', text: name });
+                index += name.length;
+                continue;
+            }
+            tokens.push({ kind: 'plain', text: name });
+            index += name.length;
+            continue;
+        }
+        const operator = OPERATORS.find((candidate) => source.startsWith(candidate, index));
+        if (operator) {
+            tokens.push({ kind: 'operator', text: operator });
+            index += operator.length;
+            continue;
+        }
+        if (char === '(' || char === ')') {
+            tokens.push({ kind: 'paren', text: char });
+            index++;
+            continue;
+        }
+        if (char === ',' || char === ';' || char === ':') {
+            tokens.push({ kind: 'separator', text: char });
+            index++;
+            continue;
+        }
+        tokens.push({ kind: 'plain', text: char });
+        index++;
+    }
+    return tokens;
+}
+
 /**
  * The optional adapter a sheet renders its list cells through.
  *
@@ -1889,6 +2036,59 @@ function applySpanUnmerge(spans, anchors) {
     return spans.filter((span) => !anchors.some((anchor) => sameCell(anchor, span)));
 }
 
+/**
+ * Every group an axis makes, deepest level last.
+ *
+ * @param levels The level of each member; `0` or a hole outside every fold.
+ * @param identify Names a member for the group's id, usually its stable key.
+ * @returns One group per run, at each level from 1 to the deepest the axis carries.
+ */
+function outlineGroups(levels, identify) {
+    const deepest = levels.reduce((deepest, level) => Math.max(deepest, level || 0), 0);
+    const groups = [];
+    for (let level = 1; level <= deepest; level++) {
+        let start = -1;
+        for (let index = 0; index <= levels.length; index++) {
+            const inside = index < levels.length && (levels[index] || 0) >= level;
+            if (inside && start === -1) {
+                start = index;
+            }
+            if (!inside && start !== -1) {
+                groups.push({ id: `${level}:${identify(start)}`, level, start, end: index - 1 });
+                start = -1;
+            }
+        }
+    }
+    return groups;
+}
+/**
+ * The members a set of folded groups takes out of the axis.
+ *
+ * A member is hidden when any group that encloses it — one whose level is no deeper than its own
+ * and whose run contains it — is folded. Folding an outer group therefore takes its inner ones with
+ * it, which is what folding a level in Excel does.
+ *
+ * @param levels The level of each member.
+ * @param groups Every group the axis makes, as {@link outlineGroups} returns them.
+ * @param collapsed The ids of the folded groups.
+ * @returns The indices not to draw, in order.
+ */
+function collapsedMembers(levels, groups, collapsed) {
+    const folded = new Set(collapsed);
+    const hidden = new Set();
+    for (const group of groups) {
+        if (!folded.has(group.id)) {
+            continue;
+        }
+        for (let index = group.start; index <= group.end; index++) {
+            if ((levels[index] || 0) >= group.level) {
+                hidden.add(index);
+            }
+        }
+    }
+    return [...hidden].sort((a, b) => a - b);
+}
+
 /**
  * The height a row is assumed to have on the very first frame of a virtualised sheet, in pixels.
  *
@@ -1915,6 +2115,50 @@ const FIRST_PASS_ROW_HEIGHT = 32;
 class HubSpreadsheetComponent {
     #host = inject(ElementRef);
     #injector = inject(Injector);
+    #destroyRef = inject(DestroyRef);
+    constructor() {
+        afterNextRender(() => {
+            // The list of suggestions hangs in the window rather than in the sheet, which is how
+            // it escapes every scroll area and every `overflow: hidden` between the cell and the
+            // page. The price is that it no longer travels with the sheet, so anything that
+            // scrolls — or a resized window — puts it back on its cell. Scroll is caught in the
+            // capture phase, because the thing that scrolls the page is rarely the window.
+            const replace = () => {
+                if (this.editing()) {
+                    this.placeSuggestions();
+                }
+            };
+            const options = { capture: true, passive: true };
+            document.addEventListener('scroll', replace, options);
+            window.addEventListener('resize', replace, options);
+            this.#destroyRef.onDestroy(() => {
+                document.removeEventListener('scroll', replace, options);
+                window.removeEventListener('resize', replace, options);
+            });
+        }, { injector: this.#injector });
+    }
+    /** The `dir` to put on the host: nothing when the page is left to decide, which is `'auto'`. */
+    forcedDirection = computed(() => (this.direction() === 'auto' ? null : this.direction()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forcedDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * Which way the sheet actually runs, once the page has had its say.
+     *
+     * `'auto'` is answered by the element itself, because `dir` is inherited and only the element
+     * knows what it inherited. Read after render: before it, the attribute this very binding sets is
+     * not on the element yet, so the answer would be the page's and not the sheet's.
+     */
+    resolvedDirection = signal('ltr', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
+    readDirection = afterRenderEffect({
+        read: () => {
+            const preference = this.direction();
+            const computed = getComputedStyle(this.#host.nativeElement).direction === 'rtl' ? 'rtl' : 'ltr';
+            this.resolvedDirection.set(preference === 'auto' ? computed : preference);
+        }
+    });
+    /** Whether the sheet runs right to left, which is what the menu and the list have to know. */
+    rtl = computed(() => this.resolvedDirection() === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
     /** The rows, as the owner holds them. Never written to. */
     rows = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
@@ -1982,6 +2226,25 @@ class HubSpreadsheetComponent {
     /** Aliases retired by earlier deletions, so a new column never reuses one. */
     retiredColumnKeys = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "retiredColumnKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * Which way the sheet runs.
+     *
+     * `'auto'` follows whatever the page says, which is the only honest default: a sheet dropped
+     * into a right-to-left article on a left-to-right page has to read the way the article does,
+     * and a `dir` is inherited. `'ltr'` and `'rtl'` force it for a host that needs the sheet to run
+     * against the page around it.
+     */
+    direction = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether `Ctrl`-clicking (`Cmd` on a Mac) adds a second rectangle to the selection instead of
+     * starting a new one.
+     *
+     * On, because it is what a spreadsheet does and because the gesture is otherwise spent: a plain
+     * click already selects, so `Ctrl` had nothing to say. Off for a host that wants the modifier
+     * for something of its own.
+     */
+    disjointSelection = input(true, { ...(ngDevMode ? { debugName: "disjointSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** 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. */
@@ -2075,10 +2338,83 @@ class HubSpreadsheetComponent {
      */
     editOn = input('double-click', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editOn" }] : /* istanbul ignore next */ []));
+    /**
+     * A template drawn inside a row that is open, under the row itself.
+     *
+     * What a row holds behind its figures, laid out where the row is: a detail panel, the lines of
+     * an order, a breakdown. In place and not in a dialog over it, so the open row can still be
+     * read against the one above. The row opens when a cell reports an `action` or when the owner
+     * writes {@link expandedRow} itself, and the template is handed the row, its index and a way
+     * to close it.
+     */
+    expansion = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expansion" }] : /* istanbul ignore next */ []));
+    /**
+     * Which row is open, by its key, or null when none is.
+     *
+     * Two-way, so the owner can open a row from its own code — a filter that reveals a match, a
+     * deep link — and hear about it when the reader opens or closes one. One row at a time: two
+     * open rows would push each other off the screen and turn the sheet into a list of dialogs.
+     */
+    expandedRow = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedRow" }] : /* istanbul ignore next */ []));
+    /**
+     * PROTOTYPE — draw a floating toggle per row to open and close its expansion.
+     *
+     * Off unless asked for, so the sheet a host already has is untouched. The toggle is drawn by
+     * the sheet and floats over the frame's leading edge, rather than being a control the owner
+     * has to place.
+     */
+    expandToggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandToggle" }] : /* istanbul ignore next */ []));
+    /** The accessible name of that toggle, the owner's string — the sheet keeps no dictionary. */
+    expandToggleLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandToggleLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Which column groups are folded, by group id.
+     *
+     * Two-way, so the owner can fold a group from its own code and hear it when the reader folds
+     * one. The ids are the outline the columns' own `level`s make — see {@link columnGroups} — and a
+     * sheet whose columns carry no level has no groups at all.
+     */
+    collapsedColumns = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedColumns" }] : /* istanbul ignore next */ []));
+    /** The accessible name of a column group's toggle, the owner's string. */
+    columnToggleLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnToggleLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * How deep a row sits in an outline: `1` inside one fold, `2` inside two, and `0` or nothing
+     * outside every fold.
+     *
+     * An accessor rather than a field, because the rows are the owner's data and the sheet does not
+     * get to add one.
+     */
+    rowLevel = input(() => 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowLevel" }] : /* istanbul ignore next */ []));
+    /**
+     * Which row groups are folded, by group id.
+     *
+     * Two-way, as {@link collapsedColumns} is, and the ids are the outline the rows' own levels
+     * make — see {@link rowGroups}.
+     */
+    collapsedRows = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedRows" }] : /* istanbul ignore next */ []));
+    /** The accessible name of a row group's toggle, the owner's string. */
+    rowToggleLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowToggleLabel" }] : /* istanbul ignore next */ []));
     /** A cell took a new value. */
     commit = output();
     /** A block was pasted. */
     pasted = output();
+    /**
+     * The reader asked to open what a cell points at.
+     *
+     * Raised by a cell that declares an `action`, with the pointer or with `Enter`. The sheet
+     * reports and does no more: what a cell opens — a panel, a page, a dialog of the owner's — is
+     * the owner's to open. A row that carries an expansion opens through {@link expandedRow}
+     * instead, which is the sheet's own.
+     */
+    opened = output();
     /** Delete was pressed over these cells, the editable ones of the selection. */
     cleared = output();
     /** The selected rectangle changed; null when nothing is selected. */
@@ -2114,6 +2450,13 @@ class HubSpreadsheetComponent {
      * thing in a line.
      */
     mergeRequested = output();
+    /**
+     * Every rectangle of the selection, whenever it changes.
+     *
+     * Beside {@link selectionChange}, which keeps reporting the one the cursor is in: a host that
+     * shows "sum of the selection" needs all of them, and one that shows "you are in B4" does not.
+     */
+    selectionRangesChange = output();
     /** The reader asked to take apart the blocks their selection touches, named by their anchors. */
     unmergeRequested = output();
     /** The cell the cursor is on. */
@@ -2122,6 +2465,25 @@ class HubSpreadsheetComponent {
     /** 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 */ []));
+    /**
+     * The rectangles picked before the one being drawn.
+     *
+     * Held apart from the anchor and the cursor rather than as a list including them, because the
+     * live one has to keep growing under the pointer while the others stay exactly as they were.
+     */
+    extraRanges = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraRanges" }] : /* istanbul ignore next */ []));
+    /**
+     * The cells a pointing gesture is over, while a formula is being written.
+     *
+     * Kept apart from the selection: pointing picks a reference to put into the text, and moving the
+     * reader's own selection out from under them to do it would be a different gesture wearing the
+     * same click.
+     */
+    pointAnchor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointAnchor" }] : /* istanbul ignore next */ []));
+    pointTarget = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointTarget" }] : /* istanbul ignore next */ []));
     editing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
     draft = signal('', /* @ts-ignore */
@@ -2187,6 +2549,9 @@ class HubSpreadsheetComponent {
      */
     viewport = viewChild('viewport', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    /** The coloured copy of the draft drawn behind the editor while a formula is being written. */
+    tokens = viewChild('tokens', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
     scrollTop = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
     viewportHeight = signal(0, /* @ts-ignore */
@@ -2206,7 +2571,7 @@ class HubSpreadsheetComponent {
     rowWindow = computed(() => {
         const total = this.rows().length;
         const frozen = Math.min(this.frozenRows(), total);
-        if (!this.virtual()) {
+        if (!this.virtual() || this.hiddenRows().size) {
             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
@@ -2237,7 +2602,7 @@ class HubSpreadsheetComponent {
         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()) {
+        if (!this.virtual() || this.hiddenColumns().size) {
             return everything;
         }
         const widths = this.measuredColumnWidths();
@@ -2253,17 +2618,56 @@ class HubSpreadsheetComponent {
         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. */
+    /** The outline the columns' levels make: one group per run, at each level. */
+    columnGroups = computed(() => outlineGroups(this.columns().map((column) => column.level ?? 0), (index) => this.columns()[index]?.key ?? String(index)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnGroups" }] : /* istanbul ignore next */ []));
+    /** The columns a folded group takes out, by index. */
+    hiddenColumns = computed(() => new Set(collapsedMembers(this.columns().map((column) => column.level ?? 0), this.columnGroups(), this.collapsedColumns())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+    /** The outline the rows' levels make: one group per run, at each level. */
+    rowGroups = computed(() => outlineGroups(this.rows().map((row) => this.rowLevel()(row) ?? 0), (index) => this.keys()[index]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowGroups" }] : /* istanbul ignore next */ []));
+    /** The rows a folded group takes out, by index. */
+    hiddenRows = computed(() => new Set(collapsedMembers(this.rows().map((row) => this.rowLevel()(row) ?? 0), this.rowGroups(), this.collapsedRows())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenRows" }] : /* istanbul ignore next */ []));
+    /** The columns that belong to a group, so the run can be tinted while it is out. */
+    groupedColumns = computed(() => {
+        const grouped = new Set();
+        for (const group of this.columnGroups()) {
+            for (let index = group.start; index <= group.end; index++) {
+                grouped.add(index);
+            }
+        }
+        return grouped;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupedColumns" }] : /* istanbul ignore next */ []));
+    /** The rows that belong to a group. */
+    groupedRows = computed(() => {
+        const grouped = new Set();
+        for (const group of this.rowGroups()) {
+            for (let index = group.start; index <= group.end; index++) {
+                grouped.add(index);
+            }
+        }
+        return grouped;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupedRows" }] : /* istanbul ignore next */ []));
+    /** The column indices in the document: frozen ones first, folded ones out. */
     drawnColumns = computed(() => {
         const total = this.columns().length;
         const frozen = Math.min(this.frozenColumns(), total);
         const window = this.columnWindow();
+        const hidden = this.hiddenColumns();
         const drawn = [];
         for (let index = 0; index < frozen; index++) {
-            drawn.push(index);
+            if (!hidden.has(index)) {
+                drawn.push(index);
+            }
         }
         for (let index = window.start; index <= window.end; index++) {
-            drawn.push(index);
+            if (!hidden.has(index)) {
+                drawn.push(index);
+            }
         }
         return drawn;
     }, /* @ts-ignore */
@@ -2280,17 +2684,22 @@ class HubSpreadsheetComponent {
         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. */
+    /** The row indices in the document: frozen ones first, folded ones out. */
     drawnRows = computed(() => {
         const total = this.rows().length;
         const frozen = Math.min(this.frozenRows(), total);
         const window = this.rowWindow();
+        const hidden = this.hiddenRows();
         const drawn = [];
         for (let index = 0; index < frozen; index++) {
-            drawn.push(index);
+            if (!hidden.has(index)) {
+                drawn.push(index);
+            }
         }
         for (let index = window.start; index <= window.end; index++) {
-            drawn.push(index);
+            if (!hidden.has(index)) {
+                drawn.push(index);
+            }
         }
         return drawn;
     }, /* @ts-ignore */
@@ -2327,6 +2736,35 @@ class HubSpreadsheetComponent {
     /** 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 */ []));
+    /**
+     * Where the list of suggestions is anchored, in the host's own coordinates.
+     *
+     * The list used to be drawn inside the cell, and the scroll area — which is what makes the
+     * sheet scroll — clipped it: on the last row it fell below the viewport and was never seen,
+     * which is exactly the row a total is written in. It hangs off the host now, like the
+     * structural menu, where no scroll area can cut it. `top` opens below the cell and `bottom`
+     * above it, only one of the two ever being set; both null until the sheet has been measured.
+     */
+    suggestionsAt = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestionsAt" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the cell being edited opens the plain field, which is the only editor the list of
+     * suggestions belongs to.
+     *
+     * A list, a calendar or a host-supplied editor owns its own keystrokes, and the formula
+     * language is not what is being typed there. While the list was drawn inside the field's own
+     * branch that was true by construction; lifted to the host it has to be said.
+     */
+    editingField = computed(() => {
+        const active = this.active();
+        if (!active || !this.editing()) {
+            return false;
+        }
+        return (!this.editorFor(active.col) &&
+            !this.hostedControl(active.row, active.col) &&
+            this.columns()[active.col]?.kind !== 'select');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingField" }] : /* istanbul ignore next */ []));
     /**
      * What to offer while a formula is being written, or nothing when one is not.
      *
@@ -2334,7 +2772,7 @@ class HubSpreadsheetComponent {
      * for people — so without this, writing one means knowing something that is not on screen.
      */
     suggestions = computed(() => {
-        if (!this.formulas() || !this.editing()) {
+        if (!this.formulas() || !this.editingField()) {
             return [];
         }
         const columns = this.columns();
@@ -2367,23 +2805,401 @@ class HubSpreadsheetComponent {
     /** 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 draft split into the pieces a formula is made of, so they can be drawn apart.
+     *
+     * Read off the raw draft rather than off the value that is shown, because this is what the
+     * reader is typing: a half-written `=SUM(` still has to say those three things are what they
+     * are, or the colour would only arrive once the formula was already right.
+     */
+    draftTokens = computed(() => tokenizeFormula(this.draft()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftTokens" }] : /* istanbul ignore next */ []));
+    /**
+     * Keeps the coloured copy under the field lined up with the field's own text.
+     *
+     * The field scrolls sideways once the formula is longer than the cell, and the copy has no way
+     * to know it did — so it is told, on every scroll and on every keystroke that moves the caret.
+     */
+    syncTokens(event) {
+        const overlay = this.tokens()?.nativeElement;
+        const field = event.target;
+        if (overlay && field) {
+            overlay.scrollLeft = field.scrollLeft;
+        }
+    }
+    /**
+     * Where the coordinate badges go, in the host's own coordinates, while a formula is written.
+     *
+     * The badges live outside the sheet's frame rather than in its cells — so the frame stays
+     * between them and the table — which also means nothing lines them up for us: every position is
+     * measured off the drawn table. `start` is from the table's leading edge (either one: the sheet
+     * may run the other way), `top` from its top.
+     */
+    coordColumns = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "coordColumns" }] : /* istanbul ignore next */ []));
+    coordRows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "coordRows" }] : /* istanbul ignore next */ []));
+    measureCoords = afterRenderEffect({
+        read: () => {
+            if (!this.writingFormula()) {
+                if (this.coordColumns().length) {
+                    this.coordColumns.set([]);
+                }
+                if (this.coordRows().length) {
+                    this.coordRows.set([]);
+                }
+                return;
+            }
+            const host = this.#host.nativeElement;
+            const frame = host.getBoundingClientRect();
+            const rtl = this.rtl();
+            const columns = this.columns();
+            const drawn = this.drawnRows();
+            this.coordColumns.set([...host.querySelectorAll('.hub-spreadsheet__header[data-header]')].map((cell) => {
+                const box = cell.getBoundingClientRect();
+                const index = Number(cell.dataset['header']);
+                return {
+                    start: Math.round(rtl ? frame.right - box.right : box.left - frame.left),
+                    width: Math.round(box.width),
+                    letter: columnLabel(index),
+                    alias: columns[index]?.key ?? ''
+                };
+            }));
+            this.coordRows.set([...host.querySelectorAll('.hub-spreadsheet__row')].map((row, position) => {
+                const box = row.getBoundingClientRect();
+                return {
+                    top: Math.round(box.top - frame.top),
+                    height: Math.round(box.height),
+                    number: (drawn[position] ?? position) + 1
+                };
+            }));
+        }
+    });
+    /**
+     * PROTOTYPE — where each row's floating toggle goes, measured the way the coordinates are.
+     *
+     * Against the host's frame rather than inside a cell, so the toggle floats over the edge of the
+     * sheet instead of travelling with the cells, and re-measured as the sheet scrolls because the
+     * effect reads the scroll signals.
+     */
+    expansionToggles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expansionToggles" }] : /* istanbul ignore next */ []));
+    measureExpansionToggles = afterRenderEffect({
+        read: () => {
+            // Follow the sheet: reading the scroll puts the layer back on every scroll, the way the
+            // frame itself moves.
+            this.scrollTop();
+            this.scrollLeft();
+            if (!this.expandToggle() || !this.expansion()) {
+                if (this.expansionToggles().length) {
+                    this.expansionToggles.set([]);
+                }
+                return;
+            }
+            const host = this.#host.nativeElement;
+            const frame = host.getBoundingClientRect();
+            const drawn = this.drawnRows();
+            this.expansionToggles.set([...host.querySelectorAll('.hub-spreadsheet__row')].map((row, position) => {
+                const box = row.getBoundingClientRect();
+                const index = drawn[position] ?? position;
+                return {
+                    top: Math.round(box.top - frame.top),
+                    height: Math.round(box.height),
+                    key: this.keys()[index],
+                    open: this.isExpanded(index)
+                };
+            }));
+        }
+    });
+    /** Opens the row the toggle belongs to, or closes it when it was already the open one. */
+    toggleByKey(key) {
+        this.expandedRow.set(this.expandedRow() === key ? null : key);
+    }
+    /**
+     * Where each column group's toggle goes, measured off the headers it folds.
+     *
+     * At the trailing edge of the group, or — when the group is folded and has no header of its own
+     * — at the trailing edge of the column before it, so the way back in stays where the group was.
+     */
+    columnToggles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnToggles" }] : /* istanbul ignore next */ []));
+    measureColumnToggles = afterRenderEffect({
+        read: () => {
+            this.scrollTop();
+            this.scrollLeft();
+            const groups = this.columnGroups();
+            if (!groups.length) {
+                if (this.columnToggles().length) {
+                    this.columnToggles.set([]);
+                }
+                return;
+            }
+            const host = this.#host.nativeElement;
+            const frame = host.getBoundingClientRect();
+            const rtl = this.rtl();
+            const folded = new Set(this.collapsedColumns());
+            const headers = [...host.querySelectorAll('.hub-spreadsheet__header[data-header]')];
+            const boxAt = (index) => {
+                const cell = headers.find((one) => Number(one.dataset['header']) === index);
+                return cell ? cell.getBoundingClientRect() : null;
+            };
+            const leadingAt = (index) => {
+                const box = boxAt(index);
+                return box ? Math.round(rtl ? frame.right - box.right : box.left - frame.left) : null;
+            };
+            const trailingAt = (index) => {
+                if (index < 0) {
+                    return 0;
+                }
+                const box = boxAt(index);
+                return box ? Math.round(rtl ? frame.right - box.left : box.right - frame.left) : null;
+            };
+            // A folded run is not drawn, so its edge is the one it left behind: the leading edge of
+            // the column that follows it, or the trailing edge of the one before when it was last.
+            const drawn = this.drawnColumns();
+            const boundaryOf = (group) => {
+                const after = drawn.find((index) => index > group.end);
+                if (after !== undefined) {
+                    return leadingAt(after);
+                }
+                const before = [...drawn].reverse().find((index) => index < group.start);
+                return before !== undefined ? trailingAt(before) : 0;
+            };
+            this.columnToggles.set(groups
+                .map((group) => {
+                const open = !folded.has(group.id);
+                const toggle = open ? trailingAt(group.end) : boundaryOf(group);
+                return toggle === null ? null : { id: group.id, toggle, open };
+            })
+                .filter((one) => one !== null));
+        }
+    });
+    /** Folds a column group away, or brings it back when it was folded. */
+    toggleColumnGroup(id) {
+        this.animateFold(() => this.collapsedColumns.update((collapsed) => collapsed.includes(id) ? collapsed.filter((one) => one !== id) : [...collapsed, id]));
+    }
+    /**
+     * Runs a fold with the browser's own transition around it.
+     *
+     * The sheet draws one state or the other and nothing between: a folded group is simply not in
+     * the document, so there is no width to animate. What it asks the browser for instead is a cross
+     * -fade between the two states, through the View Transition API where it exists — and does the
+     * fold with no transition where it does not, rather than leaving it undone.
+     */
+    animateFold(update) {
+        const doc = document;
+        if (typeof doc.startViewTransition === 'function') {
+            doc.startViewTransition(update);
+        }
+        else {
+            update();
+        }
+    }
+    /**
+     * Where each row group's toggle goes, measured off the rows it folds.
+     *
+     * At the vertical middle of the row whose fold it is, at the frame's leading edge — a handle on
+     * the heading, not a cell's control.
+     */
+    rowGroupToggles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowGroupToggles" }] : /* istanbul ignore next */ []));
+    measureRowGroupToggles = afterRenderEffect({
+        read: () => {
+            this.scrollTop();
+            this.scrollLeft();
+            const groups = this.rowGroups();
+            if (!groups.length) {
+                if (this.rowGroupToggles().length) {
+                    this.rowGroupToggles.set([]);
+                }
+                return;
+            }
+            const host = this.#host.nativeElement;
+            const frame = host.getBoundingClientRect();
+            const rows = [...host.querySelectorAll('.hub-spreadsheet__row')];
+            const drawn = this.drawnRows();
+            const folded = new Set(this.collapsedRows());
+            const boxAt = (index) => {
+                const position = drawn.indexOf(index);
+                const row = position === -1 ? null : rows[position];
+                return row ? row.getBoundingClientRect() : null;
+            };
+            // A folded run is not drawn, so its edge is the one it left behind: the top of the row
+            // that follows it, or the bottom of the one before when it was last.
+            const boundaryOf = (group) => {
+                const after = drawn.find((index) => index > group.end);
+                const box = after !== undefined ? boxAt(after) : null;
+                if (box) {
+                    return Math.round(box.top - frame.top);
+                }
+                const before = [...drawn].reverse().find((index) => index < group.start);
+                const last = before !== undefined ? boxAt(before) : null;
+                return last ? Math.round(last.bottom - frame.top) : 0;
+            };
+            this.rowGroupToggles.set(groups
+                .map((group) => {
+                const open = !folded.has(group.id);
+                if (open) {
+                    const box = boxAt(group.end);
+                    return box === null
+                        ? null
+                        : { id: group.id, toggle: Math.round(box.top - frame.top + box.height / 2), open };
+                }
+                return { id: group.id, toggle: boundaryOf(group), open };
+            })
+                .filter((one) => one !== null));
+        }
+    });
+    /** Folds a row group away, or brings it back when it was folded. */
+    toggleRowGroup(id) {
+        this.animateFold(() => this.collapsedRows.update((collapsed) => collapsed.includes(id) ? collapsed.filter((one) => one !== id) : [...collapsed, id]));
+    }
+    /**
+     * Puts the list of suggestions back on its cell once the frame has shifted for a formula.
+     *
+     * The list is placed from the cell's own rectangle, and writing the first `=` moves every cell
+     * down and in to make room for the coordinates — so the place the list was given when the cell
+     * opened is a place the cell has since left.
+     */
+    placeSuggestionsOnRender = afterRenderEffect({
+        read: () => {
+            if (this.writingFormula() && this.suggesting()) {
+                this.placeSuggestions();
+            }
+        }
+    });
     /** The letters a column answers to in a formula: A, B … Z, AA. */
     columnLetter(index) {
         return columnLabel(index);
     }
+    /**
+     * Writes a column's alias into the formula being written, from its header badge.
+     *
+     * Nothing when no formula is being written: the badge also shows outside one, as a reading of
+     * what the column is called, and a click there has nothing to write into.
+     */
+    insertAlias(alias) {
+        if (this.writingFormula()) {
+            this.useSuggestion({ label: alias, kind: 'column', insert: `[${alias}]` });
+        }
+    }
     /** 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 editor = this.editorField();
         const caret = editor?.selectionStart ?? this.draft().length;
         const applied = applySuggestion(this.draft(), suggestion, caret);
-        this.draft.set(applied.draft);
+        this.writeDraft(applied.draft, applied.caret);
+    }
+    /** The field a formula is being written in, when there is one. */
+    editorField() {
+        return this.#host.nativeElement.querySelector('input.hub-spreadsheet__editor');
+    }
+    /**
+     * Puts text into the draft at the caret and leaves it there, ready for what is typed next.
+     *
+     * The caret matters as much as the text: dropped after an inserted reference it is ready for
+     * the operator or the next argument, and left where it was the reader has to move it by hand
+     * every single time.
+     */
+    writeDraft(text, caret) {
+        const editor = this.editorField();
+        this.draft.set(text);
         this.suggestionAt.set(-1);
         if (editor) {
-            editor.value = applied.draft;
+            editor.value = text;
             editor.focus();
-            editor.setSelectionRange(applied.caret, applied.caret);
+            editor.setSelectionRange(caret, caret);
         }
     }
+    /** Starts pointing at cells to put their reference into the formula being written. */
+    beginPointing(row, col) {
+        this.pointAnchor.set({ row, col });
+        this.pointTarget.set({ row, col });
+    }
+    /** Gives up on a pointing gesture without writing anything. */
+    cancelPointing() {
+        this.pointAnchor.set(null);
+        this.pointTarget.set(null);
+    }
+    /**
+     * Writes the pointed rectangle into the formula as a reference and ends the gesture.
+     *
+     * A single cell goes in as `B3`; more than one as `B3:D7`, the way a spreadsheet names a
+     * rectangle. Coordinates rather than aliases, because that is what pointing at cells means:
+     * an alias names a whole column, and there is no alias for one cell or for a patch of them.
+     */
+    commitPointing() {
+        const anchor = this.pointAnchor();
+        const target = this.pointTarget();
+        this.cancelPointing();
+        if (!anchor || !target) {
+            return;
+        }
+        const range = gridRangeBetween(anchor, target);
+        const near = formatCoordinate({ row: range.top, col: range.left });
+        const far = formatCoordinate({ row: range.bottom, col: range.right });
+        const reference = near === far ? near : `${near}:${far}`;
+        const editor = this.editorField();
+        const caret = editor?.selectionStart ?? this.draft().length;
+        this.writeDraft(this.draft().slice(0, caret) + reference + this.draft().slice(caret), caret + reference.length);
+    }
+    /**
+     * Works out where the list of suggestions belongs, against the cell being edited.
+     *
+     * The list is `fixed`, so these are window coordinates read straight off the cell's own
+     * rectangle — which is also the only honest way to place it with frozen panes and
+     * virtualisation, where the drawn position and the scroll offset are not the same number. It
+     * hangs just under the cell, pulled in only as far as keeps it on screen, and it flips above
+     * the cell when the window has no room below — so the last row of a sheet that reaches the
+     * foot of the page can still be written in.
+     */
+    placeSuggestions() {
+        const active = this.active();
+        if (!active) {
+            this.suggestionsAt.set(null);
+            return;
+        }
+        const cell = this.#host.nativeElement
+            .querySelector(`[data-cell="${active.row}-${active.col}"]`)
+            ?.getBoundingClientRect();
+        // A sheet that has not been laid out — a hidden panel, a closed tab, a test with no layout —
+        // has nothing to measure. The list keeps where it was rather than jumping to a corner, and
+        // the next placement gets it right.
+        if (!cell || (cell.width === 0 && cell.height === 0)) {
+            return;
+        }
+        // The width the list asks for, and how far it can go before running off the window's edge.
+        // Measured from the edge the sheet starts at — the left when it reads left to right, the
+        // right when it does not — because the list is placed by its inline start, whichever that is.
+        const wanted = 224;
+        const width = Math.min(wanted, window.innerWidth);
+        const fromStart = this.rtl() ? window.innerWidth - cell.right : cell.left;
+        const x = Math.max(0, Math.min(fromStart, window.innerWidth - width));
+        // Below is the default; above only when below is the shorter side, so the list does not
+        // cover the rows the reader is writing between.
+        const roomBelow = window.innerHeight - cell.bottom;
+        const above = roomBelow < wanted && cell.top > roomBelow;
+        this.suggestionsAt.set({
+            x,
+            top: above ? null : cell.bottom,
+            bottom: above ? window.innerHeight - cell.top : null,
+            maxWidth: Math.max(width, window.innerWidth - x)
+        });
+    }
+    /**
+     * Whether a cell is worked out from a formula rather than typed.
+     *
+     * Two ways to be one: the row holds the text of a formula, or the column declares one and every
+     * cell of it answers with it. Only when the sheet reads formulas at all — with that off, a
+     * leading `=` is just the character somebody typed, and marking it would be a lie.
+     */
+    isFormulaCell(row, col) {
+        if (!this.formulas()) {
+            return false;
+        }
+        const cell = this.grid()[row]?.[col];
+        return !!cell && (isFormula(cell.value) || !!this.columns()[col]?.formula);
+    }
     /** Whether a cell is showing a formula that could not be worked out. */
     hasFormulaError(row, col) {
         const cell = this.grid()[row]?.[col];
@@ -2406,6 +3222,22 @@ class HubSpreadsheetComponent {
         return base ? clampGridRange(coversRange(this.spanMap(), base), this.bounds()) : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /**
+     * Every rectangle the reader has picked: the ones held with `Ctrl`, and the live one last.
+     *
+     * Trimmed to the grid on every read for the same reason one rectangle is — rows come and go
+     * under a live selection, and a stale rectangle would be cleared or copied against cells that
+     * are not there any more.
+     */
+    selection = computed(() => {
+        const live = this.range();
+        const kept = clampGridSelection(this.extraRanges(), this.bounds());
+        return live ? addGridRange(kept, live) : kept;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Whether the reader has picked more than one rectangle. */
+    disjoint = computed(() => this.selection().length > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disjoint" }] : /* 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
@@ -2418,6 +3250,7 @@ class HubSpreadsheetComponent {
             if (active && (active.row >= rows || active.col >= cols)) {
                 this.active.set(null);
                 this.anchor.set(null);
+                this.extraRanges.set([]);
                 this.editing.set(false);
             }
         });
@@ -2557,7 +3390,26 @@ class HubSpreadsheetComponent {
         return !!active && active.row === row && active.col === col;
     }
     isSelected(row, col) {
-        return isWithinGridRange({ row, col }, this.range());
+        return isWithinGridSelection({ row, col }, this.selection());
+    }
+    /** Whether a press is being dragged out to point a reference into the formula being written. */
+    pointing = computed(() => !!this.pointAnchor(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointing" }] : /* istanbul ignore next */ []));
+    /**
+     * The rectangle a pointing gesture currently covers, or null when none is in progress.
+     *
+     * Drawn on the cells rather than kept out of sight, because the whole point of pointing is to
+     * see what is about to go into the formula before letting go of it.
+     */
+    pointedRange = computed(() => {
+        const anchor = this.pointAnchor();
+        const target = this.pointTarget();
+        return anchor && target ? gridRangeBetween(anchor, target) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointedRange" }] : /* istanbul ignore next */ []));
+    isPointed(row, col) {
+        const range = this.pointedRange();
+        return !!range && isWithinGridRange({ row, col }, range);
     }
     tabIndexOf(row, col) {
         return gridCellTabIndex({ row, col }, this.active(), 'roving');
@@ -2660,9 +3512,51 @@ class HubSpreadsheetComponent {
             cell,
             row: this.rows()[row],
             column: this.columns()[col],
-            active: this.isActive(row, col)
+            active: this.isActive(row, col),
+            open: () => this.openCell(row, col)
         };
     }
+    /** Whether a row is the one open. */
+    isExpanded(row) {
+        return this.expandedRow() !== null && this.expandedRow() === this.keys()[row];
+    }
+    /** The context a row's expansion template is rendered with. */
+    expansionContext(row) {
+        return {
+            $implicit: this.rows()[row],
+            row: this.rows()[row],
+            index: row,
+            key: this.keys()[row],
+            close: () => this.closeExpansion()
+        };
+    }
+    /** Opens a row, or closes it when it was already the open one. */
+    toggleExpansion(row) {
+        this.expandedRow.set(this.isExpanded(row) ? null : this.keys()[row]);
+    }
+    /** Closes whatever row is open. */
+    closeExpansion() {
+        this.expandedRow.set(null);
+    }
+    /**
+     * Whether this column's cells open onto something rather than being typed into.
+     *
+     * A cell template says so with `hubSpreadsheetCellAction`, and only the template does: the
+     * sheet draws nothing itself, but it has to know, because it is what keeps `Enter` for the
+     * cell instead of opening an editor the cell has not got.
+     */
+    cellOpens(col) {
+        return !!this.cellTemplateFor(col)?.action();
+    }
+    /** Reports that the reader asked to open what a cell points at. */
+    openCell(row, col) {
+        this.opened.emit({
+            coords: { row, col },
+            row: this.rows()[row],
+            column: this.columns()[col],
+            cell: this.grid()[row][col]
+        });
+    }
     /** The context a custom editor template is rendered with. */
     editorContext(row, col) {
         const cell = this.grid()[row][col];
@@ -2720,6 +3614,22 @@ class HubSpreadsheetComponent {
         }
         return !this.readonly() && !!this.grid()[row]?.[col]?.editable;
     }
+    /**
+     * Opens the cell the `fx` marks for writing, so the formula is edited where it is read.
+     *
+     * Nothing on a cell that refuses to open: a column that carries its own formula answers the same
+     * in every row and has nothing to type over, and its mark says so by not taking the pointer.
+     */
+    editFormula(row, col, event) {
+        // The mark sits inside the cell, so the press must not reach the cell and be taken for a pick.
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.canEdit(row, col)) {
+            return;
+        }
+        this.moveTo({ row, col }, false);
+        this.startEdit(undefined);
+    }
     onKeydown(event) {
         const active = this.active();
         if (!active) {
@@ -2754,6 +3664,13 @@ class HubSpreadsheetComponent {
                 this.moveTo(resolveGridEdge(active, intent.edge, this.bounds()), intent.extend);
                 break;
             case 'edit':
+                // A cell that opens onto something, with no field to write in, answers Enter with
+                // that rather than with an editor it does not have. Typing a character is left
+                // alone: such a cell holds no value to write over.
+                if (!intent.seed && !this.canEdit(active.row, active.col) && this.cellOpens(active.col)) {
+                    this.openCell(active.row, active.col);
+                    break;
+                }
                 this.startEdit(intent.seed);
                 break;
             case 'clear':
@@ -2785,7 +3702,19 @@ class HubSpreadsheetComponent {
         }
     }
     onMouseDown(event, row, col) {
-        if (event.button !== 0 || (this.editing() && this.isActive(row, col))) {
+        if (event.button !== 0) {
+            return;
+        }
+        // While a formula is being written, a press on another cell points at it instead of
+        // committing the text: that is how a reference gets into a formula without typing its
+        // address. The press is swallowed so the field keeps the focus and the caret it was about
+        // to lose — which is also what lets the reader drag out a rectangle.
+        if (this.editing() && this.writingFormula() && !this.isActive(row, col)) {
+            event.preventDefault();
+            this.beginPointing(row, col);
+            return;
+        }
+        if (this.editing() && this.isActive(row, col)) {
             return;
         }
         if (this.editing()) {
@@ -2793,7 +3722,17 @@ class HubSpreadsheetComponent {
         }
         this.dragging = true;
         this.dragMoved = false;
-        this.moveTo({ row, col }, event.shiftKey);
+        // `Ctrl` (or `Cmd`) puts the rectangle that was being drawn away and starts another, so the
+        // reader can pick blocks that have nothing to do with each other. Shift still extends the
+        // live one, and holding both extends it without losing the rest.
+        const adding = this.disjointSelection() && (event.ctrlKey || event.metaKey);
+        if (adding && !event.shiftKey) {
+            const live = this.range();
+            if (live) {
+                this.extraRanges.update((ranges) => addGridRange(ranges, live));
+            }
+        }
+        this.moveTo({ row, col }, event.shiftKey, adding);
     }
     /**
      * Opens the editor on release, not on press.
@@ -2814,6 +3753,11 @@ class HubSpreadsheetComponent {
         this.startEdit(undefined);
     }
     onMouseEnter(row, col) {
+        // Pointing grows its own rectangle, and the reader's selection is left exactly where it was.
+        if (this.pointing()) {
+            this.pointTarget.set({ row, col });
+            return;
+        }
         if (this.dragging && !this.isActive(row, col)) {
             this.dragMoved = true;
         }
@@ -2872,8 +3816,15 @@ class HubSpreadsheetComponent {
         }
     }
     endDrag() {
+        const pointing = this.pointing();
         this.dragging = false;
         this.resizing = null;
+        // A pointing gesture is not a drag: releasing it writes the reference rather than finishing
+        // a column move or a fill, neither of which was ever started.
+        if (pointing) {
+            this.commitPointing();
+            return;
+        }
         this.commitColumnMove();
         if (this.fillSource()) {
             this.commitFill();
@@ -2894,7 +3845,9 @@ class HubSpreadsheetComponent {
         }
         event.preventDefault();
         const host = this.#host.nativeElement.getBoundingClientRect();
-        this.menuAt.set({ x: event.clientX - host.left, y: event.clientY - host.top });
+        // Placed by its inline start, so measured from the edge the sheet starts at.
+        const x = this.rtl() ? host.right - event.clientX : event.clientX - host.left;
+        this.menuAt.set({ x, y: event.clientY - host.top });
     }
     closeMenu() {
         this.menuAt.set(null);
@@ -3026,6 +3979,10 @@ class HubSpreadsheetComponent {
         this.viewportHeight.set(viewport.clientHeight);
         this.scrollLeft.set(viewport.scrollLeft);
         this.viewportWidth.set(viewport.clientWidth);
+        // The cell being edited has moved with the scroll, and so has the list hanging off it.
+        if (this.editing()) {
+            this.placeSuggestions();
+        }
         if (!this.rowHeight()) {
             const row = viewport.querySelector('.hub-spreadsheet__row');
             const height = row?.getBoundingClientRect().height ?? 0;
@@ -3058,7 +4015,9 @@ class HubSpreadsheetComponent {
     /** 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;
+        // Never on a disjoint selection: a fill continues one rectangle, and which of several it
+        // would continue is a question with no answer. A spreadsheet drops the handle too.
+        return (this.fillHandle() && !this.readonly() && !this.disjoint() && !!range && row === range.bottom && col === range.right);
     }
     /** Whether a cell is inside the area a released fill would write to. */
     isFillPreview(row, col) {
@@ -3165,15 +4124,18 @@ class HubSpreadsheetComponent {
         this.startEdit(undefined);
     }
     onCopy(event, cut) {
-        const range = this.range();
-        if (!range || this.editing() || !event.clipboardData) {
+        // Several rectangles only make a table when they line up — all on the same columns, or all
+        // on the same rows. Anything else has no honest shape to write, so nothing is written and
+        // the clipboard keeps what it had, which is what Excel does when it refuses the command.
+        const table = gridSelectionTable(this.selection());
+        if (!table || this.editing() || !event.clipboardData) {
             return;
         }
         const grid = this.grid();
         const values = [];
-        for (let row = range.top; row <= range.bottom; row++) {
+        for (const row of table.rows) {
             const line = [];
-            for (let col = range.left; col <= range.right; col++) {
+            for (const col of table.cols) {
                 line.push(grid[row][col].value);
             }
             values.push(line);
@@ -3270,6 +4232,9 @@ class HubSpreadsheetComponent {
         this.suggestionAt.set(-1);
         this.draft.set(event.target.value);
         this.invalid.set(false);
+        // The copy behind has just changed length, and may have been re-anchored; keep it where the
+        // field is rather than at the start of the line.
+        this.syncTokens(event);
     }
     onEditorKeydown(event) {
         // A composition is in flight: the Enter that picks a candidate is not the Enter that
@@ -3298,7 +4263,14 @@ class HubSpreadsheetComponent {
             case 'Escape':
                 event.preventDefault();
                 event.stopPropagation();
-                this.cancelEdit();
+                // A pointing gesture in flight is what Escape gives up first: the formula stays as it
+                // was, and the reader is still writing it.
+                if (this.pointing()) {
+                    this.cancelPointing();
+                }
+                else {
+                    this.cancelEdit();
+                }
                 break;
         }
     }
@@ -3448,6 +4420,9 @@ class HubSpreadsheetComponent {
         this.draft.set(this.openingText(cell, kind, seed, opener));
         this.invalid.set(false);
         this.editing.set(true);
+        // The cell is already drawn — it is the one that was clicked — so its rectangle can be read
+        // now, and the list is anchored before the list itself is ever rendered.
+        this.placeSuggestions();
         afterNextRender(() => {
             const editor = this.#host.nativeElement.querySelector('.hub-spreadsheet__editor');
             if (!editor) {
@@ -3577,7 +4552,7 @@ class HubSpreadsheetComponent {
         }
         return typeof cell.value === 'number' ? String(cell.value).replace('.', this.decimalMark()) : String(cell.value);
     }
-    moveTo(rawTarget, extend) {
+    moveTo(rawTarget, extend, keepExtras = false) {
         // 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);
@@ -3587,11 +4562,17 @@ class HubSpreadsheetComponent {
         else {
             this.anchor.set(null);
         }
+        // Any ordinary move starts the selection again, which is what every spreadsheet does: the
+        // rectangles held with `Ctrl` last until the reader clicks or walks somewhere plainly.
+        if (!keepExtras) {
+            this.extraRanges.set([]);
+        }
         this.active.set(target);
         this.announceSelection();
         this.focusActive();
     }
     selectRange(range) {
+        this.extraRanges.set([]);
         this.anchor.set({ row: range.top, col: range.left });
         this.active.set({ row: range.bottom, col: range.right });
         this.announceSelection();
@@ -3657,6 +4638,12 @@ class HubSpreadsheetComponent {
      * missing, which is also when the sheet is drawing every column anyway.
      */
     scrollColumnIntoView(viewport, col) {
+        // Right to left, the scroll offset runs the other way and the arithmetic below would nudge
+        // the sheet in the wrong direction. The browser's own focus scroll brings the drawn cell
+        // into view; reaching a column that is not drawn yet is left alone rather than guessed at.
+        if (this.rtl()) {
+            return;
+        }
         const widths = this.measuredColumnWidths();
         const frozen = Math.min(this.frozenColumns(), this.columns().length);
         if (widths.length !== this.columns().length || widths.some((width) => !(width > 0))) {
@@ -3698,13 +4685,14 @@ class HubSpreadsheetComponent {
     }
     announceSelection() {
         this.selectionChange.emit(this.range());
+        this.selectionRangesChange.emit(this.selection());
     }
     announceCleared() {
-        const range = this.range();
-        if (!range || this.readonly()) {
+        const ranges = this.selection();
+        if (!ranges.length || this.readonly()) {
             return;
         }
-        const cells = gridRangeCells(range)
+        const cells = gridSelectionCells(ranges)
             .filter(({ row, col }) => this.canEdit(row, col) && this.grid()[row][col].value !== null)
             .map((coords) => this.refAt(coords));
         if (cells.length) {
@@ -3712,7 +4700,7 @@ class HubSpreadsheetComponent {
         }
     }
     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 });
+    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 }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disjointSelection: { classPropertyName: "disjointSelection", publicName: "disjointSelection", 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 }, expansion: { classPropertyName: "expansion", publicName: "expansion", isSignal: true, isRequired: false, transformFunction: null }, expandedRow: { classPropertyName: "expandedRow", publicName: "expandedRow", isSignal: true, isRequired: false, transformFunction: null }, expandToggle: { classPropertyName: "expandToggle", publicName: "expandToggle", isSignal: true, isRequired: false, transformFunction: null }, expandToggleLabel: { classPropertyName: "expandToggleLabel", publicName: "expandToggleLabel", isSignal: true, isRequired: false, transformFunction: null }, collapsedColumns: { classPropertyName: "collapsedColumns", publicName: "collapsedColumns", isSignal: true, isRequired: false, transformFunction: null }, columnToggleLabel: { classPropertyName: "columnToggleLabel", publicName: "columnToggleLabel", isSignal: true, isRequired: false, transformFunction: null }, rowLevel: { classPropertyName: "rowLevel", publicName: "rowLevel", isSignal: true, isRequired: false, transformFunction: null }, collapsedRows: { classPropertyName: "collapsedRows", publicName: "collapsedRows", isSignal: true, isRequired: false, transformFunction: null }, rowToggleLabel: { classPropertyName: "rowToggleLabel", publicName: "rowToggleLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnWidths: "columnWidthsChange", expandedRow: "expandedRowChange", collapsedColumns: "collapsedColumnsChange", collapsedRows: "collapsedRowsChange", commit: "commit", pasted: "pasted", opened: "opened", cleared: "cleared", selectionChange: "selectionChange", insertRequested: "insertRequested", deleteRequested: "deleteRequested", filled: "filled", undoRequested: "undoRequested", redoRequested: "redoRequested", columnMoved: "columnMoved", mergeRequested: "mergeRequested", selectionRangesChange: "selectionRangesChange", unmergeRequested: "unmergeRequested" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "document:mouseup": "endDrag()", "document:mousemove": "onPointerMove($event)", "document:mousedown": "closeMenu()", "document:keydown.escape": "closeMenu()" }, properties: { "attr.dir": "forcedDirection()", "class.hub-spreadsheet--readonly": "readonly()", "class.hub-spreadsheet--editing": "editing()", "class.hub-spreadsheet--formula": "writingFormula()", "class.hub-spreadsheet--virtual": "virtual()", "class.hub-spreadsheet--rtl": "rtl()" }, 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 }, { propertyName: "tokens", first: true, predicate: ["tokens"], 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[class.hub-spreadsheet__grouped]=\"groupedColumns().has(columnIndex)\"\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\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\t[class.hub-spreadsheet__grouped]=\"groupedColumns().has(colIndex) || groupedRows().has(rowIndex)\"\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--pointed]=\"isPointed(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 (writingFormula()) {\n\t\t\t\t\t\t\t\t\t\t\t<!-- The draft again, in colour, drawn behind the field \u2014 which keeps the\n\t\t\t\t\t\t\t\t\t\ttext transparent so this is what the reader sees. Named by kind so a\n\t\t\t\t\t\t\t\t\t\tfunction, a column alias and a place are told apart at a glance. Hidden\n\t\t\t\t\t\t\t\t\t\tfrom assistive technology: it is a second copy of the field's own text. -->\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__tokens\" aria-hidden=\"true\" #tokens>\n\t\t\t\t\t\t\t\t\t\t\t\t@for (token of draftTokens(); track $index) {\n\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[class]=\"'hub-spreadsheet__token hub-spreadsheet__token--' + token.kind\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>{{ token.text }}</span\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}\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[class.hub-spreadsheet__editor--coloured]=\"writingFormula()\"\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(scroll)=\"syncTokens($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<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\n\t\t\t\t\t\t\t\t<!-- A cell worked out from a formula rather than typed, marked with a small `fx`\n\t\t\t\t\t\t\t\tin its corner. Shown on the cell under the pointer only: a mark on every formula\n\t\t\t\t\t\t\t\tcell at once would read as content. Pressing it opens the cell for writing, if the\n\t\t\t\t\t\t\t\tformula can be edited at all. Hidden from assistive technology \u2014 the value is what\n\t\t\t\t\t\t\t\tmatters, and the marker says nothing a reader needs. -->\n\t\t\t\t\t\t\t\t@if (isFormulaCell(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__fx\"\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-spreadsheet__fx--editable]=\"canEdit(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t(mousedown)=\"editFormula(rowIndex, colIndex, $event)\"\n\t\t\t\t\t\t\t\t\t></button>\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\n\t\t\t\t<!-- What the row holds behind its figures, opened in place. A dialog used to be the\n\t\t\t\tonly shape for this and it is the wrong one: it hides the row it is about and cannot\n\t\t\t\tbe read against the one above. -->\n\t\t\t\t@if (expansion() && isExpanded(rowIndex)) {\n\t\t\t\t\t<tr class=\"hub-spreadsheet__expansion\" role=\"row\">\n\t\t\t\t\t\t<td class=\"hub-spreadsheet__expansion-cell\" role=\"gridcell\" [attr.colspan]=\"drawnCellCount()\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"expansion()!\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"expansionContext(rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t}\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<!-- The coordinates, outside the sheet's frame while a formula is written: a column's letter and the\nalias a formula calls it by over the table, the row's number down its leading edge. The viewport\nshifts to make room, so the frame stays between these and the table. Measured off the drawn table\n(the grid already names every cell by its indices, so these are decoration), and the column badge is\nclickable to write its alias into the formula. -->\n@if (writingFormula()) {\n\t<div class=\"hub-spreadsheet__coords\" aria-hidden=\"true\">\n\t\t@for (column of coordColumns(); track $index) {\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__coord hub-spreadsheet__coord--column\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[style.--coord-start]=\"column.start + 'px'\"\n\t\t\t\t[style.--coord-width]=\"column.width + 'px'\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); insertAlias(column.alias)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-spreadsheet__coord-letter\">{{ column.letter }}</span>\n\t\t\t\t<span class=\"hub-spreadsheet__coord-alias\">{{ column.alias }}</span>\n\t\t\t</button>\n\t\t}\n\n\t\t@for (row of coordRows(); track $index) {\n\t\t\t<span class=\"hub-spreadsheet__coord-row\" [style.inset-block-start.px]=\"row.top\" [style.block-size.px]=\"row.height\">\n\t\t\t\t<span class=\"hub-spreadsheet__coord hub-spreadsheet__coord--row\">{{ row.number }}</span>\n\t\t\t</span>\n\t\t}\n\t</div>\n}\n\n@if (expandToggle() && expansion()) {\n\t<!-- PROTOTYPE: a floating toggle per row, over the frame's leading edge, that opens and closes\n\tthe row's expansion. Its place is measured against the frame and put back on every scroll, so it\n\tstays where its row is rather than travelling with the cells. -->\n\t<div class=\"hub-spreadsheet__toggles\">\n\t\t@for (toggle of expansionToggles(); track toggle.key) {\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__toggle hub-spreadsheet__toggle--start\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-block-start.px]=\"toggle.top\"\n\t\t\t\t[style.block-size.px]=\"toggle.height\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"expandToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleByKey(toggle.key)\"\n\t\t\t></button>\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__toggle hub-spreadsheet__toggle--end\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-block-start.px]=\"toggle.top\"\n\t\t\t\t[style.block-size.px]=\"toggle.height\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"expandToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleByKey(toggle.key)\"\n\t\t\t></button>\n\t\t}\n\t</div>\n}\n\n@if (rowGroupToggles().length) {\n\t<!-- The row groups: a line across the sheet where a run is folded away, and a button at the\n\tmiddle of the row whose fold it is. -->\n\t<div class=\"hub-spreadsheet__row-toggles\">\n\t\t@for (toggle of rowGroupToggles(); track toggle.id) {\n\t\t\t@if (!toggle.open) {\n\t\t\t\t<span\n\t\t\t\t\tclass=\"hub-spreadsheet__fold hub-spreadsheet__fold--row\"\n\t\t\t\t\t[style.inset-block-start.px]=\"toggle.toggle\"\n\t\t\t\t></span>\n\t\t\t}\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__row-toggle\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__row-toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-block-start.px]=\"toggle.toggle\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"rowToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleRowGroup(toggle.id)\"\n\t\t\t></button>\n\t\t}\n\t</div>\n}\n\n@if (columnToggles().length) {\n\t<!-- The column groups: a bracket over the headers across the run it folds \u2014 a coloured mark\n\twider than zero once the run is folded away \u2014 and a button at the bracket's end. -->\n\t<div class=\"hub-spreadsheet__column-toggles\">\n\t\t@for (toggle of columnToggles(); track toggle.id) {\n\t\t\t@if (!toggle.open) {\n\t\t\t\t<span class=\"hub-spreadsheet__fold\" [style.inset-inline-start.px]=\"toggle.toggle\"></span>\n\t\t\t}\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__column-toggle\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__column-toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-inline-start.px]=\"toggle.toggle\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"columnToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleColumnGroup(toggle.id)\"\n\t\t\t></button>\n\t\t}\n\t</div>\n}\n\n@if (suggesting()) {\n\t<!-- What can go into the formula being written. Anchored to the host, never to the cell: drawn\n\tinside the cell the scroll area cut it, and on the last row \u2014 the row a total is written in \u2014\n\tit was never seen at all. The position is the component's; these are the looks. Hidden from\n\tassistive technology: the field owns the conversation. -->\n\t<div\n\t\tclass=\"hub-spreadsheet__suggestions\"\n\t\trole=\"presentation\"\n\t\taria-hidden=\"true\"\n\t\t[style.inset-inline-start.px]=\"suggestionsAt()?.x\"\n\t\t[style.inset-block-start.px]=\"suggestionsAt()?.top\"\n\t\t[style.inset-block-end.px]=\"suggestionsAt()?.bottom\"\n\t\t[style.max-inline-size.px]=\"suggestionsAt()?.maxWidth\"\n\t>\n\t\t@for (suggestion of suggestions(); track suggestion.label; let index = $index) {\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__suggestion\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__suggestion--on]=\"index === suggestionIndex()\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); useSuggestion(suggestion)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-spreadsheet__suggestion-name\">{{ suggestion.label }}</span>\n\t\t\t\t@if (suggestion.hint) {\n\t\t\t\t\t<span class=\"hub-spreadsheet__suggestion-hint\">{{ suggestion.hint }}</span>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t</div>\n}\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;display:block;color:var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529)))}.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__viewport{max-block-size:var(--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, var(--hub-table-container-max-block-size, none));border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));border-radius:var(--hub-spreadsheet-border-radius, var(--hub-table-border-radius, var(--hub-sys-radius-lg, .5rem)));background:var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))}.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, var(--hub-table-border-width, 1px));--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px));padding:var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border-inline-end:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));border-block-end:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));background:var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)));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, var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa)));color:var(--hub-spreadsheet-header-color, var(--hub-sys-text-muted, #6a737b));font-size:var(--hub-spreadsheet-header-font-size, .8125rem);font-weight:var(--hub-spreadsheet-header-font-weight, 600)}.hub-spreadsheet__header--moving{opacity:var(--hub-spreadsheet-moving-opacity, .5)}.hub-spreadsheet__header--move-target{outline:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));outline-offset:calc(var(--hub-spreadsheet-cursor-width, 2px) * -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, 2px) solid var(--hub-spreadsheet-frozen-divider-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))))}.hub-spreadsheet__header--end{text-align:end}.hub-spreadsheet__header--center{text-align:center}:host(.hub-spreadsheet--formula){padding-block-start:2.8rem;padding-inline-start:2.6rem}.hub-spreadsheet__coords{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__coord-row{position:absolute;inset-inline-start:.45rem;display:flex;align-items:center;inline-size:calc(2.6rem - .45rem * 2)}.hub-spreadsheet__coord{position:absolute;display:inline-flex;gap:.3rem;align-items:center;justify-content:center;block-size:1.9rem;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:.4rem;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529)));box-shadow:0 1px 2px #0000001f;font:inherit;font-size:var(--hub-spreadsheet-header-font-size, .8125rem);font-weight:400;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;pointer-events:auto;animation:hub-spreadsheet-coord-in .18s ease both}.hub-spreadsheet__coord--column{inset-block-start:.45rem;inset-inline-start:calc(var(--coord-start, 0px) + .45rem);inline-size:calc(var(--coord-width, 0px) - .45rem * 2);cursor:default}.hub-spreadsheet__coord--row{position:relative;inline-size:100%}.hub-spreadsheet__toggles{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__toggle{position:absolute;display:flex;align-items:center;justify-content:center;inline-size:1rem;padding:0;border:0;background:none;color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));cursor:pointer;opacity:.5;transition:opacity .15s ease;pointer-events:auto}.hub-spreadsheet__toggle:hover,.hub-spreadsheet__toggle--open{opacity:1}.hub-spreadsheet__toggle:before{content:\"\";inline-size:.85rem;block-size:.85rem;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:50%;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));box-shadow:0 1px 2px #0000001f}.hub-spreadsheet__toggle:after{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:.26rem;block-size:.26rem;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:translate(-58%,-42%) rotate(45deg);transition:transform .15s ease}.hub-spreadsheet__toggle--open:after{transform:translate(-58%,-42%) rotate(-135deg)}.hub-spreadsheet__toggle--start{inset-inline-start:0;margin-inline-start:-.55rem}.hub-spreadsheet__toggle--end{inset-inline-end:0;margin-inline-end:-.55rem}.hub-spreadsheet__column-toggles{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__column-toggle{position:absolute;inset-block-start:-.55rem;display:flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;margin-inline-start:-.5rem;padding:0;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:50%;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));box-shadow:0 1px 2px #0000001f;cursor:pointer;transition:background .15s ease;pointer-events:auto}.hub-spreadsheet__column-toggle:hover{background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 18%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))))}.hub-spreadsheet__column-toggle:before,.hub-spreadsheet__column-toggle:after{content:\"\";position:absolute;background:currentColor}.hub-spreadsheet__column-toggle:before{inline-size:.5rem;block-size:1.5px}.hub-spreadsheet__column-toggle:after{inline-size:1.5px;block-size:.5rem}.hub-spreadsheet__column-toggle--open:after{display:none}.hub-spreadsheet__fold{position:absolute;inset-block:0;inline-size:2px;background:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));opacity:.6;pointer-events:none}.hub-spreadsheet__fold--row{inset-block:auto;inset-inline:0;block-size:2px;inline-size:auto}.hub-spreadsheet__cell.hub-spreadsheet__grouped,.hub-spreadsheet__header.hub-spreadsheet__grouped{background-color:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 14%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))))}.hub-spreadsheet__row-toggles{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__row-toggle{position:absolute;inset-inline-start:0;display:flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;margin-inline-start:-.5rem;transform:translateY(-50%);padding:0;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:50%;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));box-shadow:0 1px 2px #0000001f;cursor:pointer;transition:background .15s ease;pointer-events:auto}.hub-spreadsheet__row-toggle:hover{background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 18%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))))}.hub-spreadsheet__row-toggle:before,.hub-spreadsheet__row-toggle:after{content:\"\";position:absolute;background:currentColor}.hub-spreadsheet__row-toggle:before{inline-size:.5rem;block-size:1.5px}.hub-spreadsheet__row-toggle:after{inline-size:1.5px;block-size:.5rem}.hub-spreadsheet__row-toggle--open:after{display:none}.hub-spreadsheet__coord-letter{font-weight:600}.hub-spreadsheet__coord-alias{padding:0 .25rem;border-radius:.25rem;background:var(--hub-spreadsheet-alias-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent));overflow:hidden;text-overflow:ellipsis}@keyframes hub-spreadsheet-coord-in{0%{opacity:0;transform:translateY(.25rem) scale(.85)}to{opacity:1;transform:none}}.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, 2px);border-inline-end:var(--hub-spreadsheet-frozen-divider-width, 2px) solid var(--hub-spreadsheet-frozen-divider-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))))}.hub-spreadsheet__cell--frozen-row-edge{--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-frozen-divider-width, 2px);border-block-end:var(--hub-spreadsheet-frozen-divider-width, 2px) solid var(--hub-spreadsheet-frozen-divider-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))))}.hub-spreadsheet__cell--filling{background-image:linear-gradient(var(--hub-spreadsheet-fill-preview-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 6%, transparent)),var(--hub-spreadsheet-fill-preview-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 6%, transparent)))}.hub-spreadsheet__cell--selected{background-image:linear-gradient(var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)),var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)))}.hub-spreadsheet__cell--pointed{background-image:linear-gradient(var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)),var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)));box-shadow:inset 0 0 0 var(--hub-spreadsheet-cursor-width, 2px) var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd))}.hub-spreadsheet__cell--readonly{background-color:var(--hub-spreadsheet-readonly-bg, color-mix(in srgb, var(--hub-spreadsheet-header-bg, var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa))) 55%, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))));color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b));cursor:default}.hub-spreadsheet__cell--muted{color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b))}.hub-spreadsheet__cell--invalid{background-image:linear-gradient(var(--hub-spreadsheet-invalid-bg, color-mix(in srgb, var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e)) 10%, transparent)),var(--hub-spreadsheet-invalid-bg, color-mix(in srgb, var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e)) 10%, transparent)));color:var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e));box-shadow:inset 0 0 0 var(--hub-spreadsheet-invalid-border-width, 1px) var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e))}.hub-spreadsheet__cell--active{outline:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));outline-offset:calc(var(--hub-spreadsheet-cursor-width, 2px) * -1);z-index:2}.hub-spreadsheet__cell--editing{block-size:calc(var(--hub-spreadsheet-cell-line-height, 1.5em) + var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) * 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, 3px)}.hub-spreadsheet__cell[data-state=pending]:before{background:var(--hub-spreadsheet-state-pending-color, var(--hub-sys-color-warning, #cc8a00))}.hub-spreadsheet__cell[data-state=saving]:before{background:var(--hub-spreadsheet-state-saving-color, var(--hub-sys-color-info, #0a7ea4))}.hub-spreadsheet__cell[data-state=saved]:before{background:var(--hub-spreadsheet-state-saved-color, var(--hub-sys-color-success, #1a7f37))}.hub-spreadsheet__cell[data-state=error]:before{background:var(--hub-spreadsheet-state-error-color, var(--hub-sys-color-danger, #b3261e))}.hub-spreadsheet__cell[data-state=conflict]:before{background:repeating-linear-gradient(45deg,var(--hub-spreadsheet-state-conflict-color, var(--hub-sys-color-danger, #b3261e)) 0 3px,transparent 3px 6px)}.hub-spreadsheet__editor--select{padding-inline:calc(var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem)) - 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, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));outline:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));outline-offset:calc(var(--hub-spreadsheet-cursor-width, 2px) * -1);z-index:3;--hub-input-bg: var(--hub-spreadsheet-editor-field-bg, transparent);--hub-input-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-input-border-radius: var(--hub-spreadsheet-editor-field-border-radius, 0);--hub-input-focus-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-input-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow, none);--hub-input-padding-x: var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));--hub-select-bg: var(--hub-spreadsheet-editor-field-bg, transparent);--hub-select-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-select-border-radius: var(--hub-spreadsheet-editor-field-border-radius, 0);--hub-select-focus-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-select-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow, none);--hub-select-padding-x: var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem))}.hub-spreadsheet__spacer>td{padding:0;border:0;background:var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))}.hub-spreadsheet__affordance{position:absolute;inset-block:0;inset-inline-end:calc(var(--hub-spreadsheet-affordance-field-border, var(--hub-input-border-width, 1px)) - var(--hub-spreadsheet-cell-edge-inline));display:flex;align-items:center;padding-inline:var(--hub-spreadsheet-affordance-gap, var(--hub-select-arrow-gap, .5rem));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-select-arrow-size, 5px)) var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) calc(var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) / 2);border-color:var(--hub-spreadsheet-affordance-color, var(--hub-select-arrow-color, var(--hub-sys-text-muted, #6a737b))) transparent transparent}.hub-spreadsheet__affordance--date:after{inline-size:calc(var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) * 2);block-size:calc(var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) * 1.8);border:1px solid var(--hub-spreadsheet-affordance-color, var(--hub-select-arrow-color, var(--hub-sys-text-muted, #6a737b)));border-block-start-width:3px;border-radius:2px}.hub-spreadsheet__placeholder{position:absolute;inset-block:0;inset-inline:var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));display:flex;align-items:center;color:var(--hub-spreadsheet-placeholder-color, var(--hub-sys-text-muted, #6a737b));opacity:0;pointer-events:none;transition:var(--hub-spreadsheet-placeholder-transition, var(--hub-sys-transition-fast, all .15s ease-in-out))}.hub-spreadsheet__cell:hover>.hub-spreadsheet__placeholder{opacity:var(--hub-spreadsheet-placeholder-opacity, .65)}.hub-spreadsheet__check{inline-size:1em;block-size:1em;accent-color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));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, 5px);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, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)))}.hub-spreadsheet__fill-handle{position:absolute;inset-block-end:0;inset-inline-end:0;inline-size:var(--hub-spreadsheet-fill-handle-size, 7px);block-size:var(--hub-spreadsheet-fill-handle-size, 7px);background:var(--hub-spreadsheet-fill-handle-color, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)));cursor:crosshair;z-index:4}.hub-spreadsheet__secondary{display:block;opacity:.75}.hub-spreadsheet__expansion-cell{padding:var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border-block-end:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));background:var(--hub-spreadsheet-header-bg, var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa)));white-space:normal;vertical-align:top}.hub-spreadsheet__fx{position:absolute;inset-block-start:2px;inset-inline-end:2px;z-index:1;padding:0 .3rem;border:0;border-radius:.3rem;background:var(--hub-spreadsheet-formula-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 14%, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))));color:var(--hub-spreadsheet-formula-color, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)));font-size:.5625rem;font-style:italic;font-weight:600;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .12s ease}.hub-spreadsheet__fx:before{content:\"fx\"}.hub-spreadsheet__cell:hover>.hub-spreadsheet__fx{opacity:1}.hub-spreadsheet__fx--editable{cursor:pointer;pointer-events:auto}.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-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));border-radius:0;background:var(--hub-spreadsheet-editor-bg, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-editor-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))));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, var(--hub-sys-color-danger, #b3261e))}.hub-spreadsheet__tokens{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-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border:var(--hub-spreadsheet-cursor-width, 2px) solid transparent;border-radius:0;background:var(--hub-spreadsheet-editor-bg, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-editor-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))));font:inherit;font-variant-numeric:tabular-nums;text-align:inherit;white-space:pre;overflow:hidden;pointer-events:none;z-index:1}.hub-spreadsheet__editor--coloured{background:transparent;color:transparent;caret-color:var(--hub-spreadsheet-editor-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))))}.hub-spreadsheet__token{border-radius:3px}.hub-spreadsheet__token--function{color:var(--hub-spreadsheet-token-function-color, var(--hub-sys-color-primary, #0d6efd));background:color-mix(in srgb,var(--hub-spreadsheet-token-function-color, var(--hub-sys-color-primary, #0d6efd)) 14%,transparent)}.hub-spreadsheet__token--column{color:var(--hub-spreadsheet-token-column-color, var(--hub-sys-color-info, #0a7ea4));background:color-mix(in srgb,var(--hub-spreadsheet-token-column-color, var(--hub-sys-color-info, #0a7ea4)) 14%,transparent)}.hub-spreadsheet__token--coordinate{color:var(--hub-spreadsheet-token-coordinate-color, var(--hub-sys-color-success, #1a7f37));background:color-mix(in srgb,var(--hub-spreadsheet-token-coordinate-color, var(--hub-sys-color-success, #1a7f37)) 14%,transparent)}.hub-spreadsheet__token--text{color:var(--hub-spreadsheet-token-text-color, var(--hub-sys-color-danger, #b3261e));background:color-mix(in srgb,var(--hub-spreadsheet-token-text-color, var(--hub-sys-color-danger, #b3261e)) 12%,transparent)}.hub-spreadsheet__token--operator,.hub-spreadsheet__token--equals,.hub-spreadsheet__token--paren,.hub-spreadsheet__token--separator{color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b))}.hub-spreadsheet__empty{padding-block:calc(var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) * 4);color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b));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, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-menu-border-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))));border-radius:var(--hub-spreadsheet-menu-radius, var(--hub-sys-radius-sm, .25rem));background:var(--hub-spreadsheet-menu-bg, var(--hub-sys-color-surface, #fff));color:var(--hub-spreadsheet-menu-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))));box-shadow:var(--hub-spreadsheet-menu-shadow, 0 6px 20px rgba(0, 0, 0, .18))}.hub-spreadsheet__menu-item{display:block;inline-size:100%;padding:var(--hub-spreadsheet-menu-item-padding-y, .4rem) var(--hub-spreadsheet-menu-item-padding-x, .85rem);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, var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)))}.hub-spreadsheet__suggestions{position:fixed;z-index:1000;display:flex;flex-direction:column;min-inline-size:14rem;max-block-size:14rem;overflow-y:auto;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-suggestions-border-color, var(--hub-spreadsheet-menu-border-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)))));border-radius:var(--hub-spreadsheet-border-radius, var(--hub-table-border-radius, var(--hub-sys-radius-lg, .5rem)));background:var(--hub-spreadsheet-suggestions-bg, var(--hub-spreadsheet-menu-bg, var(--hub-sys-color-surface, #fff)));box-shadow:var(--hub-spreadsheet-menu-shadow, 0 6px 20px rgba(0, 0, 0, .18))}.hub-spreadsheet__suggestion{display:flex;gap:.5rem;align-items:baseline;justify-content:space-between;padding:var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));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, var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)))}.hub-spreadsheet__suggestion-name{font-variant-numeric:tabular-nums}.hub-spreadsheet__suggestion-hint{color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b));font-size:var(--hub-spreadsheet-header-font-size, .8125rem)}\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,
@@ -3731,15 +4719,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                          */
                         ngSkipHydration: 'true',
                         class: 'hub-spreadsheet',
+                        '[attr.dir]': 'forcedDirection()',
                         '[class.hub-spreadsheet--readonly]': 'readonly()',
                         '[class.hub-spreadsheet--editing]': 'editing()',
+                        '[class.hub-spreadsheet--formula]': 'writingFormula()',
                         '[class.hub-spreadsheet--virtual]': 'virtual()',
+                        '[class.hub-spreadsheet--rtl]': 'rtl()',
                         '(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 }] }] } });
+                    }, 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[class.hub-spreadsheet__grouped]=\"groupedColumns().has(columnIndex)\"\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\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\t[class.hub-spreadsheet__grouped]=\"groupedColumns().has(colIndex) || groupedRows().has(rowIndex)\"\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--pointed]=\"isPointed(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 (writingFormula()) {\n\t\t\t\t\t\t\t\t\t\t\t<!-- The draft again, in colour, drawn behind the field \u2014 which keeps the\n\t\t\t\t\t\t\t\t\t\ttext transparent so this is what the reader sees. Named by kind so a\n\t\t\t\t\t\t\t\t\t\tfunction, a column alias and a place are told apart at a glance. Hidden\n\t\t\t\t\t\t\t\t\t\tfrom assistive technology: it is a second copy of the field's own text. -->\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"hub-spreadsheet__tokens\" aria-hidden=\"true\" #tokens>\n\t\t\t\t\t\t\t\t\t\t\t\t@for (token of draftTokens(); track $index) {\n\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[class]=\"'hub-spreadsheet__token hub-spreadsheet__token--' + token.kind\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>{{ token.text }}</span\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}\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[class.hub-spreadsheet__editor--coloured]=\"writingFormula()\"\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(scroll)=\"syncTokens($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<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\n\t\t\t\t\t\t\t\t<!-- A cell worked out from a formula rather than typed, marked with a small `fx`\n\t\t\t\t\t\t\t\tin its corner. Shown on the cell under the pointer only: a mark on every formula\n\t\t\t\t\t\t\t\tcell at once would read as content. Pressing it opens the cell for writing, if the\n\t\t\t\t\t\t\t\tformula can be edited at all. Hidden from assistive technology \u2014 the value is what\n\t\t\t\t\t\t\t\tmatters, and the marker says nothing a reader needs. -->\n\t\t\t\t\t\t\t\t@if (isFormulaCell(rowIndex, colIndex)) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-spreadsheet__fx\"\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-spreadsheet__fx--editable]=\"canEdit(rowIndex, colIndex)\"\n\t\t\t\t\t\t\t\t\t\t(mousedown)=\"editFormula(rowIndex, colIndex, $event)\"\n\t\t\t\t\t\t\t\t\t></button>\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\n\t\t\t\t<!-- What the row holds behind its figures, opened in place. A dialog used to be the\n\t\t\t\tonly shape for this and it is the wrong one: it hides the row it is about and cannot\n\t\t\t\tbe read against the one above. -->\n\t\t\t\t@if (expansion() && isExpanded(rowIndex)) {\n\t\t\t\t\t<tr class=\"hub-spreadsheet__expansion\" role=\"row\">\n\t\t\t\t\t\t<td class=\"hub-spreadsheet__expansion-cell\" role=\"gridcell\" [attr.colspan]=\"drawnCellCount()\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"expansion()!\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"expansionContext(rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t}\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<!-- The coordinates, outside the sheet's frame while a formula is written: a column's letter and the\nalias a formula calls it by over the table, the row's number down its leading edge. The viewport\nshifts to make room, so the frame stays between these and the table. Measured off the drawn table\n(the grid already names every cell by its indices, so these are decoration), and the column badge is\nclickable to write its alias into the formula. -->\n@if (writingFormula()) {\n\t<div class=\"hub-spreadsheet__coords\" aria-hidden=\"true\">\n\t\t@for (column of coordColumns(); track $index) {\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__coord hub-spreadsheet__coord--column\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[style.--coord-start]=\"column.start + 'px'\"\n\t\t\t\t[style.--coord-width]=\"column.width + 'px'\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); insertAlias(column.alias)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-spreadsheet__coord-letter\">{{ column.letter }}</span>\n\t\t\t\t<span class=\"hub-spreadsheet__coord-alias\">{{ column.alias }}</span>\n\t\t\t</button>\n\t\t}\n\n\t\t@for (row of coordRows(); track $index) {\n\t\t\t<span class=\"hub-spreadsheet__coord-row\" [style.inset-block-start.px]=\"row.top\" [style.block-size.px]=\"row.height\">\n\t\t\t\t<span class=\"hub-spreadsheet__coord hub-spreadsheet__coord--row\">{{ row.number }}</span>\n\t\t\t</span>\n\t\t}\n\t</div>\n}\n\n@if (expandToggle() && expansion()) {\n\t<!-- PROTOTYPE: a floating toggle per row, over the frame's leading edge, that opens and closes\n\tthe row's expansion. Its place is measured against the frame and put back on every scroll, so it\n\tstays where its row is rather than travelling with the cells. -->\n\t<div class=\"hub-spreadsheet__toggles\">\n\t\t@for (toggle of expansionToggles(); track toggle.key) {\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__toggle hub-spreadsheet__toggle--start\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-block-start.px]=\"toggle.top\"\n\t\t\t\t[style.block-size.px]=\"toggle.height\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"expandToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleByKey(toggle.key)\"\n\t\t\t></button>\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__toggle hub-spreadsheet__toggle--end\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-block-start.px]=\"toggle.top\"\n\t\t\t\t[style.block-size.px]=\"toggle.height\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"expandToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleByKey(toggle.key)\"\n\t\t\t></button>\n\t\t}\n\t</div>\n}\n\n@if (rowGroupToggles().length) {\n\t<!-- The row groups: a line across the sheet where a run is folded away, and a button at the\n\tmiddle of the row whose fold it is. -->\n\t<div class=\"hub-spreadsheet__row-toggles\">\n\t\t@for (toggle of rowGroupToggles(); track toggle.id) {\n\t\t\t@if (!toggle.open) {\n\t\t\t\t<span\n\t\t\t\t\tclass=\"hub-spreadsheet__fold hub-spreadsheet__fold--row\"\n\t\t\t\t\t[style.inset-block-start.px]=\"toggle.toggle\"\n\t\t\t\t></span>\n\t\t\t}\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__row-toggle\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__row-toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-block-start.px]=\"toggle.toggle\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"rowToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleRowGroup(toggle.id)\"\n\t\t\t></button>\n\t\t}\n\t</div>\n}\n\n@if (columnToggles().length) {\n\t<!-- The column groups: a bracket over the headers across the run it folds \u2014 a coloured mark\n\twider than zero once the run is folded away \u2014 and a button at the bracket's end. -->\n\t<div class=\"hub-spreadsheet__column-toggles\">\n\t\t@for (toggle of columnToggles(); track toggle.id) {\n\t\t\t@if (!toggle.open) {\n\t\t\t\t<span class=\"hub-spreadsheet__fold\" [style.inset-inline-start.px]=\"toggle.toggle\"></span>\n\t\t\t}\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__column-toggle\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__column-toggle--open]=\"toggle.open\"\n\t\t\t\t[style.inset-inline-start.px]=\"toggle.toggle\"\n\t\t\t\t[attr.aria-expanded]=\"toggle.open\"\n\t\t\t\t[attr.aria-label]=\"columnToggleLabel() || null\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(click)=\"toggleColumnGroup(toggle.id)\"\n\t\t\t></button>\n\t\t}\n\t</div>\n}\n\n@if (suggesting()) {\n\t<!-- What can go into the formula being written. Anchored to the host, never to the cell: drawn\n\tinside the cell the scroll area cut it, and on the last row \u2014 the row a total is written in \u2014\n\tit was never seen at all. The position is the component's; these are the looks. Hidden from\n\tassistive technology: the field owns the conversation. -->\n\t<div\n\t\tclass=\"hub-spreadsheet__suggestions\"\n\t\trole=\"presentation\"\n\t\taria-hidden=\"true\"\n\t\t[style.inset-inline-start.px]=\"suggestionsAt()?.x\"\n\t\t[style.inset-block-start.px]=\"suggestionsAt()?.top\"\n\t\t[style.inset-block-end.px]=\"suggestionsAt()?.bottom\"\n\t\t[style.max-inline-size.px]=\"suggestionsAt()?.maxWidth\"\n\t>\n\t\t@for (suggestion of suggestions(); track suggestion.label; let index = $index) {\n\t\t\t<button\n\t\t\t\tclass=\"hub-spreadsheet__suggestion\"\n\t\t\t\ttype=\"button\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[class.hub-spreadsheet__suggestion--on]=\"index === suggestionIndex()\"\n\t\t\t\t(mousedown)=\"$event.preventDefault(); useSuggestion(suggestion)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-spreadsheet__suggestion-name\">{{ suggestion.label }}</span>\n\t\t\t\t@if (suggestion.hint) {\n\t\t\t\t\t<span class=\"hub-spreadsheet__suggestion-hint\">{{ suggestion.hint }}</span>\n\t\t\t\t}\n\t\t\t</button>\n\t\t}\n\t</div>\n}\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;display:block;color:var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529)))}.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__viewport{max-block-size:var(--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, var(--hub-table-container-max-block-size, none));border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));border-radius:var(--hub-spreadsheet-border-radius, var(--hub-table-border-radius, var(--hub-sys-radius-lg, .5rem)));background:var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))}.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, var(--hub-table-border-width, 1px));--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px));padding:var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border-inline-end:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));border-block-end:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));background:var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)));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, var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa)));color:var(--hub-spreadsheet-header-color, var(--hub-sys-text-muted, #6a737b));font-size:var(--hub-spreadsheet-header-font-size, .8125rem);font-weight:var(--hub-spreadsheet-header-font-weight, 600)}.hub-spreadsheet__header--moving{opacity:var(--hub-spreadsheet-moving-opacity, .5)}.hub-spreadsheet__header--move-target{outline:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));outline-offset:calc(var(--hub-spreadsheet-cursor-width, 2px) * -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, 2px) solid var(--hub-spreadsheet-frozen-divider-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))))}.hub-spreadsheet__header--end{text-align:end}.hub-spreadsheet__header--center{text-align:center}:host(.hub-spreadsheet--formula){padding-block-start:2.8rem;padding-inline-start:2.6rem}.hub-spreadsheet__coords{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__coord-row{position:absolute;inset-inline-start:.45rem;display:flex;align-items:center;inline-size:calc(2.6rem - .45rem * 2)}.hub-spreadsheet__coord{position:absolute;display:inline-flex;gap:.3rem;align-items:center;justify-content:center;block-size:1.9rem;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:.4rem;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529)));box-shadow:0 1px 2px #0000001f;font:inherit;font-size:var(--hub-spreadsheet-header-font-size, .8125rem);font-weight:400;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;pointer-events:auto;animation:hub-spreadsheet-coord-in .18s ease both}.hub-spreadsheet__coord--column{inset-block-start:.45rem;inset-inline-start:calc(var(--coord-start, 0px) + .45rem);inline-size:calc(var(--coord-width, 0px) - .45rem * 2);cursor:default}.hub-spreadsheet__coord--row{position:relative;inline-size:100%}.hub-spreadsheet__toggles{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__toggle{position:absolute;display:flex;align-items:center;justify-content:center;inline-size:1rem;padding:0;border:0;background:none;color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));cursor:pointer;opacity:.5;transition:opacity .15s ease;pointer-events:auto}.hub-spreadsheet__toggle:hover,.hub-spreadsheet__toggle--open{opacity:1}.hub-spreadsheet__toggle:before{content:\"\";inline-size:.85rem;block-size:.85rem;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:50%;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));box-shadow:0 1px 2px #0000001f}.hub-spreadsheet__toggle:after{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:.26rem;block-size:.26rem;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:translate(-58%,-42%) rotate(45deg);transition:transform .15s ease}.hub-spreadsheet__toggle--open:after{transform:translate(-58%,-42%) rotate(-135deg)}.hub-spreadsheet__toggle--start{inset-inline-start:0;margin-inline-start:-.55rem}.hub-spreadsheet__toggle--end{inset-inline-end:0;margin-inline-end:-.55rem}.hub-spreadsheet__column-toggles{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__column-toggle{position:absolute;inset-block-start:-.55rem;display:flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;margin-inline-start:-.5rem;padding:0;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:50%;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));box-shadow:0 1px 2px #0000001f;cursor:pointer;transition:background .15s ease;pointer-events:auto}.hub-spreadsheet__column-toggle:hover{background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 18%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))))}.hub-spreadsheet__column-toggle:before,.hub-spreadsheet__column-toggle:after{content:\"\";position:absolute;background:currentColor}.hub-spreadsheet__column-toggle:before{inline-size:.5rem;block-size:1.5px}.hub-spreadsheet__column-toggle:after{inline-size:1.5px;block-size:.5rem}.hub-spreadsheet__column-toggle--open:after{display:none}.hub-spreadsheet__fold{position:absolute;inset-block:0;inline-size:2px;background:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));opacity:.6;pointer-events:none}.hub-spreadsheet__fold--row{inset-block:auto;inset-inline:0;block-size:2px;inline-size:auto}.hub-spreadsheet__cell.hub-spreadsheet__grouped,.hub-spreadsheet__header.hub-spreadsheet__grouped{background-color:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 14%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))))}.hub-spreadsheet__row-toggles{position:absolute;inset:0;z-index:3;pointer-events:none}.hub-spreadsheet__row-toggle{position:absolute;inset-inline-start:0;display:flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;margin-inline-start:-.5rem;transform:translateY(-50%);padding:0;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 22%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));border-radius:50%;background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 9%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));box-shadow:0 1px 2px #0000001f;cursor:pointer;transition:background .15s ease;pointer-events:auto}.hub-spreadsheet__row-toggle:hover{background:color-mix(in srgb,var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 18%,var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))))}.hub-spreadsheet__row-toggle:before,.hub-spreadsheet__row-toggle:after{content:\"\";position:absolute;background:currentColor}.hub-spreadsheet__row-toggle:before{inline-size:.5rem;block-size:1.5px}.hub-spreadsheet__row-toggle:after{inline-size:1.5px;block-size:.5rem}.hub-spreadsheet__row-toggle--open:after{display:none}.hub-spreadsheet__coord-letter{font-weight:600}.hub-spreadsheet__coord-alias{padding:0 .25rem;border-radius:.25rem;background:var(--hub-spreadsheet-alias-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent));overflow:hidden;text-overflow:ellipsis}@keyframes hub-spreadsheet-coord-in{0%{opacity:0;transform:translateY(.25rem) scale(.85)}to{opacity:1;transform:none}}.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, 2px);border-inline-end:var(--hub-spreadsheet-frozen-divider-width, 2px) solid var(--hub-spreadsheet-frozen-divider-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))))}.hub-spreadsheet__cell--frozen-row-edge{--hub-spreadsheet-cell-edge-block: var(--hub-spreadsheet-frozen-divider-width, 2px);border-block-end:var(--hub-spreadsheet-frozen-divider-width, 2px) solid var(--hub-spreadsheet-frozen-divider-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))))}.hub-spreadsheet__cell--filling{background-image:linear-gradient(var(--hub-spreadsheet-fill-preview-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 6%, transparent)),var(--hub-spreadsheet-fill-preview-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 6%, transparent)))}.hub-spreadsheet__cell--selected{background-image:linear-gradient(var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)),var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)))}.hub-spreadsheet__cell--pointed{background-image:linear-gradient(var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)),var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)));box-shadow:inset 0 0 0 var(--hub-spreadsheet-cursor-width, 2px) var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd))}.hub-spreadsheet__cell--readonly{background-color:var(--hub-spreadsheet-readonly-bg, color-mix(in srgb, var(--hub-spreadsheet-header-bg, var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa))) 55%, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))));color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b));cursor:default}.hub-spreadsheet__cell--muted{color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b))}.hub-spreadsheet__cell--invalid{background-image:linear-gradient(var(--hub-spreadsheet-invalid-bg, color-mix(in srgb, var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e)) 10%, transparent)),var(--hub-spreadsheet-invalid-bg, color-mix(in srgb, var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e)) 10%, transparent)));color:var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e));box-shadow:inset 0 0 0 var(--hub-spreadsheet-invalid-border-width, 1px) var(--hub-spreadsheet-invalid-color, var(--hub-sys-color-danger, #b3261e))}.hub-spreadsheet__cell--active{outline:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));outline-offset:calc(var(--hub-spreadsheet-cursor-width, 2px) * -1);z-index:2}.hub-spreadsheet__cell--editing{block-size:calc(var(--hub-spreadsheet-cell-line-height, 1.5em) + var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) * 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, 3px)}.hub-spreadsheet__cell[data-state=pending]:before{background:var(--hub-spreadsheet-state-pending-color, var(--hub-sys-color-warning, #cc8a00))}.hub-spreadsheet__cell[data-state=saving]:before{background:var(--hub-spreadsheet-state-saving-color, var(--hub-sys-color-info, #0a7ea4))}.hub-spreadsheet__cell[data-state=saved]:before{background:var(--hub-spreadsheet-state-saved-color, var(--hub-sys-color-success, #1a7f37))}.hub-spreadsheet__cell[data-state=error]:before{background:var(--hub-spreadsheet-state-error-color, var(--hub-sys-color-danger, #b3261e))}.hub-spreadsheet__cell[data-state=conflict]:before{background:repeating-linear-gradient(45deg,var(--hub-spreadsheet-state-conflict-color, var(--hub-sys-color-danger, #b3261e)) 0 3px,transparent 3px 6px)}.hub-spreadsheet__editor--select{padding-inline:calc(var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem)) - 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, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));outline:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));outline-offset:calc(var(--hub-spreadsheet-cursor-width, 2px) * -1);z-index:3;--hub-input-bg: var(--hub-spreadsheet-editor-field-bg, transparent);--hub-input-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-input-border-radius: var(--hub-spreadsheet-editor-field-border-radius, 0);--hub-input-focus-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-input-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow, none);--hub-input-padding-x: var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));--hub-select-bg: var(--hub-spreadsheet-editor-field-bg, transparent);--hub-select-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-select-border-radius: var(--hub-spreadsheet-editor-field-border-radius, 0);--hub-select-focus-border-color: var(--hub-spreadsheet-editor-field-border-color, transparent);--hub-select-focus-box-shadow: var(--hub-spreadsheet-editor-field-focus-shadow, none);--hub-select-padding-x: var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem))}.hub-spreadsheet__spacer>td{padding:0;border:0;background:var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))}.hub-spreadsheet__affordance{position:absolute;inset-block:0;inset-inline-end:calc(var(--hub-spreadsheet-affordance-field-border, var(--hub-input-border-width, 1px)) - var(--hub-spreadsheet-cell-edge-inline));display:flex;align-items:center;padding-inline:var(--hub-spreadsheet-affordance-gap, var(--hub-select-arrow-gap, .5rem));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-select-arrow-size, 5px)) var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) calc(var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) / 2);border-color:var(--hub-spreadsheet-affordance-color, var(--hub-select-arrow-color, var(--hub-sys-text-muted, #6a737b))) transparent transparent}.hub-spreadsheet__affordance--date:after{inline-size:calc(var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) * 2);block-size:calc(var(--hub-spreadsheet-affordance-size, var(--hub-select-arrow-size, 5px)) * 1.8);border:1px solid var(--hub-spreadsheet-affordance-color, var(--hub-select-arrow-color, var(--hub-sys-text-muted, #6a737b)));border-block-start-width:3px;border-radius:2px}.hub-spreadsheet__placeholder{position:absolute;inset-block:0;inset-inline:var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));display:flex;align-items:center;color:var(--hub-spreadsheet-placeholder-color, var(--hub-sys-text-muted, #6a737b));opacity:0;pointer-events:none;transition:var(--hub-spreadsheet-placeholder-transition, var(--hub-sys-transition-fast, all .15s ease-in-out))}.hub-spreadsheet__cell:hover>.hub-spreadsheet__placeholder{opacity:var(--hub-spreadsheet-placeholder-opacity, .65)}.hub-spreadsheet__check{inline-size:1em;block-size:1em;accent-color:var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));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, 5px);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, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)))}.hub-spreadsheet__fill-handle{position:absolute;inset-block-end:0;inset-inline-end:0;inline-size:var(--hub-spreadsheet-fill-handle-size, 7px);block-size:var(--hub-spreadsheet-fill-handle-size, 7px);background:var(--hub-spreadsheet-fill-handle-color, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)));cursor:crosshair;z-index:4}.hub-spreadsheet__secondary{display:block;opacity:.75}.hub-spreadsheet__expansion-cell{padding:var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border-block-end:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)));background:var(--hub-spreadsheet-header-bg, var(--hub-table-container-bg, var(--hub-sys-color-surface-subtle, #f8f9fa)));white-space:normal;vertical-align:top}.hub-spreadsheet__fx{position:absolute;inset-block-start:2px;inset-inline-end:2px;z-index:1;padding:0 .3rem;border:0;border-radius:.3rem;background:var(--hub-spreadsheet-formula-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 14%, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff)))));color:var(--hub-spreadsheet-formula-color, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)));font-size:.5625rem;font-style:italic;font-weight:600;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .12s ease}.hub-spreadsheet__fx:before{content:\"fx\"}.hub-spreadsheet__cell:hover>.hub-spreadsheet__fx{opacity:1}.hub-spreadsheet__fx--editable{cursor:pointer;pointer-events:auto}.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-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border:var(--hub-spreadsheet-cursor-width, 2px) solid var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd));border-radius:0;background:var(--hub-spreadsheet-editor-bg, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-editor-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))));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, var(--hub-sys-color-danger, #b3261e))}.hub-spreadsheet__tokens{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-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));border:var(--hub-spreadsheet-cursor-width, 2px) solid transparent;border-radius:0;background:var(--hub-spreadsheet-editor-bg, var(--hub-spreadsheet-bg, var(--hub-table-bg, var(--hub-sys-color-surface, #fff))));color:var(--hub-spreadsheet-editor-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))));font:inherit;font-variant-numeric:tabular-nums;text-align:inherit;white-space:pre;overflow:hidden;pointer-events:none;z-index:1}.hub-spreadsheet__editor--coloured{background:transparent;color:transparent;caret-color:var(--hub-spreadsheet-editor-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))))}.hub-spreadsheet__token{border-radius:3px}.hub-spreadsheet__token--function{color:var(--hub-spreadsheet-token-function-color, var(--hub-sys-color-primary, #0d6efd));background:color-mix(in srgb,var(--hub-spreadsheet-token-function-color, var(--hub-sys-color-primary, #0d6efd)) 14%,transparent)}.hub-spreadsheet__token--column{color:var(--hub-spreadsheet-token-column-color, var(--hub-sys-color-info, #0a7ea4));background:color-mix(in srgb,var(--hub-spreadsheet-token-column-color, var(--hub-sys-color-info, #0a7ea4)) 14%,transparent)}.hub-spreadsheet__token--coordinate{color:var(--hub-spreadsheet-token-coordinate-color, var(--hub-sys-color-success, #1a7f37));background:color-mix(in srgb,var(--hub-spreadsheet-token-coordinate-color, var(--hub-sys-color-success, #1a7f37)) 14%,transparent)}.hub-spreadsheet__token--text{color:var(--hub-spreadsheet-token-text-color, var(--hub-sys-color-danger, #b3261e));background:color-mix(in srgb,var(--hub-spreadsheet-token-text-color, var(--hub-sys-color-danger, #b3261e)) 12%,transparent)}.hub-spreadsheet__token--operator,.hub-spreadsheet__token--equals,.hub-spreadsheet__token--paren,.hub-spreadsheet__token--separator{color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b))}.hub-spreadsheet__empty{padding-block:calc(var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) * 4);color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b));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, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-menu-border-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6))));border-radius:var(--hub-spreadsheet-menu-radius, var(--hub-sys-radius-sm, .25rem));background:var(--hub-spreadsheet-menu-bg, var(--hub-sys-color-surface, #fff));color:var(--hub-spreadsheet-menu-color, var(--hub-spreadsheet-color, var(--hub-table-color, var(--hub-sys-color-text, #212529))));box-shadow:var(--hub-spreadsheet-menu-shadow, 0 6px 20px rgba(0, 0, 0, .18))}.hub-spreadsheet__menu-item{display:block;inline-size:100%;padding:var(--hub-spreadsheet-menu-item-padding-y, .4rem) var(--hub-spreadsheet-menu-item-padding-x, .85rem);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, var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)))}.hub-spreadsheet__suggestions{position:fixed;z-index:1000;display:flex;flex-direction:column;min-inline-size:14rem;max-block-size:14rem;overflow-y:auto;border:var(--hub-spreadsheet-border-width, var(--hub-table-border-width, 1px)) solid var(--hub-spreadsheet-suggestions-border-color, var(--hub-spreadsheet-menu-border-color, var(--hub-spreadsheet-border-color, var(--hub-table-border-color, var(--hub-sys-border-color-default, #dee2e6)))));border-radius:var(--hub-spreadsheet-border-radius, var(--hub-table-border-radius, var(--hub-sys-radius-lg, .5rem)));background:var(--hub-spreadsheet-suggestions-bg, var(--hub-spreadsheet-menu-bg, var(--hub-sys-color-surface, #fff)));box-shadow:var(--hub-spreadsheet-menu-shadow, 0 6px 20px rgba(0, 0, 0, .18))}.hub-spreadsheet__suggestion{display:flex;gap:.5rem;align-items:baseline;justify-content:space-between;padding:var(--hub-spreadsheet-cell-padding-y, var(--hub-table-cell-padding-y, .4rem)) var(--hub-spreadsheet-cell-padding-x, var(--hub-table-cell-padding-x, .6rem));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, var(--hub-spreadsheet-selection-bg, color-mix(in srgb, var(--hub-spreadsheet-cursor-color, var(--hub-sys-color-primary, #0d6efd)) 12%, transparent)))}.hub-spreadsheet__suggestion-name{font-variant-numeric:tabular-nums}.hub-spreadsheet__suggestion-hint{color:var(--hub-spreadsheet-readonly-color, var(--hub-sys-text-muted, #6a737b));font-size:var(--hub-spreadsheet-header-font-size, .8125rem)}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disjointSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disjointSelection", 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 }] }], expansion: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansion", required: false }] }], expandedRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRow", required: false }] }, { type: i0.Output, args: ["expandedRowChange"] }], expandToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandToggle", required: false }] }], expandToggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandToggleLabel", required: false }] }], collapsedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedColumns", required: false }] }, { type: i0.Output, args: ["collapsedColumnsChange"] }], columnToggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnToggleLabel", required: false }] }], rowLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLevel", required: false }] }], collapsedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedRows", required: false }] }, { type: i0.Output, args: ["collapsedRowsChange"] }], rowToggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowToggleLabel", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], pasted: [{ type: i0.Output, args: ["pasted"] }], opened: [{ type: i0.Output, args: ["opened"] }], 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"] }], selectionRangesChange: [{ type: i0.Output, args: ["selectionRangesChange"] }], unmergeRequested: [{ type: i0.Output, args: ["unmergeRequested"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], tokens: [{ type: i0.ViewChild, args: ['tokens', { isSignal: true }] }] } });
 
 /**
  * Handing the reader a file to save.