apex-grid 1.0.1 → 2.0.0

package/{dist/src/controllers → controllers}/navigation.js

@@ -1,8 +1,8 @@
-import ApexGridRow from '../components/row.js';
 import { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';
+import { GRID_ROW_TAG } from '../internal/tags.js';
+import { getDisplayColumns } from '../internal/utils.js';
 export class NavigationController {
     get virtualizer() {
-        // @ts-expect-error - Protected member access
         return this.host.scrollContainer;
     }
     get nextNode() {
@@ -12,23 +12,31 @@ export class NavigationController {
             : { ...node };
     }
     get columns() {
-        return this.host.columns;
+        return getDisplayColumns(this.host.columns);
+    }
+    get visibleColumns() {
+        return this.columns.filter((column) => !column.hidden);
     }
     get firstColumn() {
-        var _a;
-        return (_a = this.host.getColumn(0).key) !== null && _a !== void 0 ? _a : '';
+        const first = this.visibleColumns.at(0);
+        return (first?.key ?? this.host.columns[0]?.key);
     }
     getPreviousColumn(key) {
-        return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)) - 1, 0)].key;
+        const columns = this.visibleColumns;
+        const idx = columns.findIndex((column) => column.key === key);
+        return columns[Math.max(idx - 1, 0)].key;
     }
     getNextColumn(key) {
-        return this.columns[Math.min(this.columns.indexOf(this.host.getColumn(key)) + 1, this.columns.length - 1)].key;
+        const columns = this.visibleColumns;
+        const idx = columns.findIndex((column) => column.key === key);
+        return columns[Math.min(idx + 1, columns.length - 1)].key;
     }
     scrollToCell(node) {
-        var _a;
-        const row = Array.from(this.virtualizer.querySelectorAll(ApexGridRow.is)).find(row => row.index === node.row);
+        const row = Array.from(this.virtualizer.querySelectorAll(GRID_ROW_TAG)).find((row) => row.index === node.row);
         if (row) {
-            (_a = row.cells.find(cell => cell.column.key === node.column)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+            row.cells
+                .find((cell) => cell.column.key === node.column)
+                ?.scrollIntoView({ block: 'nearest' });
         }
     }
     get active() {
@@ -49,34 +57,31 @@ export class NavigationController {
             ArrowRight: this.arrowRight,
             Home: this.home,
             End: this.end,
+            ' ': this.toggleSelection,
         }));
         this.state = NAVIGATION_STATE;
         this._active = SENTINEL_NODE;
         this.host.addController(this);
     }
     home() {
-        var _a;
         this.active = Object.assign(this.nextNode, { row: 0 });
-        (_a = this.virtualizer.element(this.active.row)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
     }
     end() {
-        var _a;
-        this.active = Object.assign(this.nextNode, { row: this.host.totalItems - 1 });
-        (_a = this.virtualizer.element(this.active.row)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        this.active = Object.assign(this.nextNode, { row: this.host.pageItems.length - 1 });
+        this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
     }
     arrowDown() {
-        var _a;
         const next = this.nextNode;
         this.active = Object.assign(next, {
-            row: Math.min(next.row + 1, this.host.totalItems - 1),
+            row: Math.min(next.row + 1, this.host.pageItems.length - 1),
         });
-        (_a = this.virtualizer.element(next.row)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
     }
     arrowUp() {
-        var _a;
         const next = this.nextNode;
         this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });
-        (_a = this.virtualizer.element(next.row)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
     }
     arrowLeft() {
         const next = this.nextNode;
@@ -88,6 +93,12 @@ export class NavigationController {
         this.active = Object.assign(next, { column: this.getNextColumn(next.column) });
         this.scrollToCell(this.active);
     }
+    toggleSelection() {
+        const data = this.host.pageItems[this.active.row];
+        if (!data)
+            return;
+        void this.host.toggleRowSelection(data);
+    }
     hostConnected() { }
     hostDisconnected() {
         this.active = SENTINEL_NODE;

package/controllers/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type ApexGridRow from '../components/row.js';\nimport { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, GridHost, Keys } from '../internal/types.js';\nimport { getDisplayColumns } from '../internal/utils.js';\n\nexport class NavigationController<T extends object> implements ReactiveController {\n  protected handlers = new Map(\n    Object.entries({\n      ArrowDown: this.arrowDown,\n      ArrowUp: this.arrowUp,\n      ArrowLeft: this.arrowLeft,\n      ArrowRight: this.arrowRight,\n      Home: this.home,\n      End: this.end,\n      ' ': this.toggleSelection,\n    })\n  );\n\n  protected get virtualizer() {\n    // @ts-expect-error - Protected member access\n    return this.host.scrollContainer;\n  }\n\n  protected state = NAVIGATION_STATE;\n  protected _active = SENTINEL_NODE;\n\n  protected get nextNode() {\n    const node = this.state.get('current')!;\n    return node === SENTINEL_NODE\n      ? { column: this.firstColumn, row: 0 }\n      : ({ ...node } as ActiveNode<T>);\n  }\n\n  protected get columns(): Array<{ key: Keys<T>; hidden?: boolean }> {\n    return getDisplayColumns(this.host.columns) as unknown as Array<{\n      key: Keys<T>;\n      hidden?: boolean;\n    }>;\n  }\n\n  protected get visibleColumns() {\n    return this.columns.filter((column) => !column.hidden);\n  }\n\n  protected get firstColumn(): Keys<T> {\n    const first = this.visibleColumns.at(0);\n    return (first?.key ?? (this.host.columns[0]?.key as Keys<T>)) as Keys<T>;\n  }\n\n  protected getPreviousColumn(key: Keys<T>): Keys<T> {\n    const columns = this.visibleColumns;\n    const idx = columns.findIndex((column) => column.key === key);\n    return columns[Math.max(idx - 1, 0)].key;\n  }\n\n  protected getNextColumn(key: Keys<T>): Keys<T> {\n    const columns = this.visibleColumns;\n    const idx = columns.findIndex((column) => column.key === key);\n    return columns[Math.min(idx + 1, columns.length - 1)].key;\n  }\n\n  protected scrollToCell(node: ActiveNode<T>) {\n    const row = Array.from(this.virtualizer.querySelectorAll(GRID_ROW_TAG)).find(\n      (row) => (row as unknown as ApexGridRow<T>).index === node.row\n    ) as unknown as ApexGridRow<T>;\n\n    if (row) {\n      row.cells\n        .find((cell) => cell.column.key === node.column)\n        ?.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  public get active() {\n    return this._active as ActiveNode<T>;\n  }\n\n  public set active(node: ActiveNode<T>) {\n    this._active = node;\n    this.state.set('previous', this._active);\n    this.state.set('current', node);\n    this.host.requestUpdate();\n  }\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  protected home() {\n    this.active = Object.assign(this.nextNode, { row: 0 });\n    this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected end() {\n    this.active = Object.assign(this.nextNode, { row: this.host.pageItems.length - 1 });\n    this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowDown() {\n    const next = this.nextNode;\n\n    this.active = Object.assign(next, {\n      row: Math.min(next.row + 1, this.host.pageItems.length - 1),\n    });\n    this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowUp() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });\n    this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowLeft() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { column: this.getPreviousColumn(next.column) });\n    this.scrollToCell(this.active);\n  }\n\n  protected arrowRight() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { column: this.getNextColumn(next.column) });\n    this.scrollToCell(this.active);\n  }\n\n  protected toggleSelection() {\n    // Space on the focused grid toggles selection of the active row.\n    // No-op when selection is disabled or there's no active row.\n    const data = this.host.pageItems[this.active.row] as T | undefined;\n    if (!data) return;\n    void this.host.toggleRowSelection(data);\n  }\n\n  public hostConnected() {}\n\n  public hostDisconnected() {\n    this.active = SENTINEL_NODE as ActiveNode<T>;\n    this.state = NAVIGATION_STATE;\n  }\n\n  public navigate(event: KeyboardEvent) {\n    if (this.handlers.has(event.key)) {\n      event.preventDefault();\n      this.handlers.get(event.key)!.call(this);\n    }\n  }\n}\n"]}

package/controllers/pagination.d.ts

@@ -0,0 +1,102 @@
+import type { ReactiveController } from 'lit';
+import type { GridHost, PaginationState } from '../internal/types.js';
+/**
+ * Default pagination state used when no `pagination` configuration is provided.
+ */
+export declare const DEFAULT_PAGINATION: Readonly<{
+    mode: "local";
+    page: 0;
+    pageSize: 25;
+    pageSizeOptions: readonly number[];
+}>;
+/**
+ * Reactive controller that owns the grid's pagination state.
+ *
+ * @remarks
+ * Exposes a state machine for the current `page` and `pageSize`, derives `pageCount`
+ * from the host's data, and emits the cancellable `pageChanging` + `pageChanged`
+ * events on the grid host. Page slicing itself is performed by
+ * {@link PaginationDataOperation} so the controller does not mutate `dataView`.
+ */
+export declare class PaginationController<T extends object> implements ReactiveController {
+    #private;
+    protected host: GridHost<T>;
+    /**
+     * The current zero-based page index.
+     */
+    page: number;
+    /**
+     * The current page size.
+     */
+    pageSize: number;
+    constructor(host: GridHost<T>);
+    hostConnected(): void;
+    /**
+     * Whether pagination is enabled on the host grid.
+     */
+    get enabled(): boolean;
+    /**
+     * The total number of records before pagination is applied.
+     *
+     * @remarks
+     * For `'local'` mode this is the post-filter, post-sort dataset length. For `'remote'`
+     * mode the consumer must supply the value via `pagination.totalItems`.
+     */
+    get totalItems(): number;
+    /**
+     * The total number of pages for the current data view and `pageSize`.
+     *
+     * @remarks
+     * Always at least `1` so a paginator can render a sensible "1 / 1" label for empty data.
+     */
+    get pageCount(): number;
+    /**
+     * Returns the resolved {@link PaginationState} for the current host.
+     */
+    get state(): PaginationState;
+    /**
+     * Clamps a candidate `page` index into the valid `[0, pageCount - 1]` range.
+     *
+     * @param page - The candidate page index.
+     */
+    clamp(page: number): number;
+    /**
+     * Re-clamps the current page after the dataset size (or `pageSize`) changes.
+     *
+     * @remarks
+     * Called from the grid pipeline so paging never points past the last valid page.
+     * Mutates `page` in place and requests a re-render when the value changes.
+     */
+    reclamp(): void;
+    /**
+     * Navigates to `page`, emitting the cancellable `pageChanging` event first and
+     * the `pageChanged` event after the pipeline has applied.
+     *
+     * @param page - The target zero-based page index. Out-of-range values are clamped.
+     * @returns `true` if the change was applied, `false` if it was cancelled or a no-op.
+     */
+    gotoPage(page: number): Promise<boolean>;
+    /**
+     * Sets the current page size and resets to the first page.
+     *
+     * @param size - The new page size. Must be a positive integer.
+     * @returns `true` if the change was applied, `false` if it was cancelled or a no-op.
+     */
+    setPageSize(size: number): Promise<boolean>;
+    /**
+     * Navigates to the next page if not already on the last one.
+     */
+    nextPage(): Promise<boolean>;
+    /**
+     * Navigates to the previous page if not already on the first one.
+     */
+    previousPage(): Promise<boolean>;
+    /**
+     * Navigates to the first page.
+     */
+    firstPage(): Promise<boolean>;
+    /**
+     * Navigates to the last page.
+     */
+    lastPage(): Promise<boolean>;
+}

package/controllers/pagination.js

@@ -0,0 +1,106 @@
+import { PIPELINE } from '../internal/constants.js';
+export const DEFAULT_PAGINATION = Object.freeze({
+    mode: 'local',
+    page: 0,
+    pageSize: 25,
+    pageSizeOptions: Object.freeze([10, 25, 50, 100]),
+});
+export class PaginationController {
+    constructor(host) {
+        this.host = host;
+        this.page = DEFAULT_PAGINATION.page;
+        this.pageSize = DEFAULT_PAGINATION.pageSize;
+        this.host.addController(this);
+    }
+    hostConnected() { }
+    get enabled() {
+        return Boolean(this.host.pagination?.enabled);
+    }
+    get totalItems() {
+        const cfg = this.host.pagination;
+        if (cfg?.mode === 'remote') {
+            return Math.max(0, cfg?.totalItems ?? 0);
+        }
+        return this.host.dataState?.length ?? 0;
+    }
+    get pageCount() {
+        if (!this.pageSize)
+            return 1;
+        return Math.max(1, Math.ceil(this.totalItems / this.pageSize));
+    }
+    get state() {
+        return {
+            page: this.page,
+            pageSize: this.pageSize,
+            pageCount: this.pageCount,
+            totalItems: this.totalItems,
+        };
+    }
+    clamp(page) {
+        if (!Number.isFinite(page))
+            return 0;
+        return Math.min(Math.max(0, Math.trunc(page)), Math.max(0, this.pageCount - 1));
+    }
+    reclamp() {
+        const next = this.clamp(this.page);
+        if (next !== this.page) {
+            this.page = next;
+            this.host.requestUpdate();
+        }
+    }
+    #emitChanging(nextPage, nextPageSize) {
+        return this.host.emitEvent('pageChanging', {
+            detail: {
+                page: this.page,
+                pageSize: this.pageSize,
+                nextPage,
+                nextPageSize,
+            },
+            cancelable: true,
+        });
+    }
+    #emitChanged() {
+        this.host.announce(`Page ${this.page + 1} of ${this.pageCount}`);
+        return this.host.emitEvent('pageChanged', { detail: this.state });
+    }
+    async gotoPage(page) {
+        const next = this.clamp(page);
+        if (next === this.page)
+            return false;
+        if (!this.#emitChanging(next, this.pageSize)) {
+            return false;
+        }
+        this.page = next;
+        this.host.requestUpdate(PIPELINE);
+        await this.host.updateComplete;
+        this.#emitChanged();
+        return true;
+    }
+    async setPageSize(size) {
+        const next = Math.max(1, Math.trunc(size));
+        if (next === this.pageSize)
+            return false;
+        if (!this.#emitChanging(0, next)) {
+            return false;
+        }
+        this.pageSize = next;
+        this.page = 0;
+        this.host.requestUpdate(PIPELINE);
+        await this.host.updateComplete;
+        this.#emitChanged();
+        return true;
+    }
+    nextPage() {
+        return this.gotoPage(this.page + 1);
+    }
+    previousPage() {
+        return this.gotoPage(this.page - 1);
+    }
+    firstPage() {
+        return this.gotoPage(0);
+    }
+    lastPage() {
+        return this.gotoPage(this.pageCount - 1);
+    }
+}
+//# sourceMappingURL=pagination.js.map

package/controllers/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../src/controllers/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { GridHost, PaginationState } from '../internal/types.js';\n\n/**\n * Default pagination state used when no `pagination` configuration is provided.\n */\nexport const DEFAULT_PAGINATION = Object.freeze({\n  mode: 'local' as const,\n  page: 0,\n  pageSize: 25,\n  pageSizeOptions: Object.freeze([10, 25, 50, 100]) as readonly number[],\n});\n\n/**\n * Reactive controller that owns the grid's pagination state.\n *\n * @remarks\n * Exposes a state machine for the current `page` and `pageSize`, derives `pageCount`\n * from the host's data, and emits the cancellable `pageChanging` + `pageChanged`\n * events on the grid host. Page slicing itself is performed by\n * {@link PaginationDataOperation} so the controller does not mutate `dataView`.\n */\nexport class PaginationController<T extends object> implements ReactiveController {\n  /**\n   * The current zero-based page index.\n   */\n  public page: number = DEFAULT_PAGINATION.page;\n\n  /**\n   * The current page size.\n   */\n  public pageSize: number = DEFAULT_PAGINATION.pageSize;\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  /**\n   * Whether pagination is enabled on the host grid.\n   */\n  public get enabled(): boolean {\n    return Boolean(this.host.pagination?.enabled);\n  }\n\n  /**\n   * The total number of records before pagination is applied.\n   *\n   * @remarks\n   * For `'local'` mode this is the post-filter, post-sort dataset length. For `'remote'`\n   * mode the consumer must supply the value via `pagination.totalItems`.\n   */\n  public get totalItems(): number {\n    const cfg = this.host.pagination;\n    if (cfg?.mode === 'remote') {\n      return Math.max(0, cfg?.totalItems ?? 0);\n    }\n    // @ts-expect-error - protected member access\n    return this.host.dataState?.length ?? 0;\n  }\n\n  /**\n   * The total number of pages for the current data view and `pageSize`.\n   *\n   * @remarks\n   * Always at least `1` so a paginator can render a sensible \"1 / 1\" label for empty data.\n   */\n  public get pageCount(): number {\n    if (!this.pageSize) return 1;\n    return Math.max(1, Math.ceil(this.totalItems / this.pageSize));\n  }\n\n  /**\n   * Returns the resolved {@link PaginationState} for the current host.\n   */\n  public get state(): PaginationState {\n    return {\n      page: this.page,\n      pageSize: this.pageSize,\n      pageCount: this.pageCount,\n      totalItems: this.totalItems,\n    };\n  }\n\n  /**\n   * Clamps a candidate `page` index into the valid `[0, pageCount - 1]` range.\n   *\n   * @param page - The candidate page index.\n   */\n  public clamp(page: number): number {\n    if (!Number.isFinite(page)) return 0;\n    return Math.min(Math.max(0, Math.trunc(page)), Math.max(0, this.pageCount - 1));\n  }\n\n  /**\n   * Re-clamps the current page after the dataset size (or `pageSize`) changes.\n   *\n   * @remarks\n   * Called from the grid pipeline so paging never points past the last valid page.\n   * Mutates `page` in place and requests a re-render when the value changes.\n   */\n  public reclamp(): void {\n    const next = this.clamp(this.page);\n    if (next !== this.page) {\n      this.page = next;\n      this.host.requestUpdate();\n    }\n  }\n\n  #emitChanging(nextPage: number, nextPageSize: number) {\n    return this.host.emitEvent('pageChanging', {\n      detail: {\n        page: this.page,\n        pageSize: this.pageSize,\n        nextPage,\n        nextPageSize,\n      },\n      cancelable: true,\n    });\n  }\n\n  #emitChanged() {\n    this.host.announce(`Page ${this.page + 1} of ${this.pageCount}`);\n    return this.host.emitEvent('pageChanged', { detail: this.state });\n  }\n\n  /**\n   * Navigates to `page`, emitting the cancellable `pageChanging` event first and\n   * the `pageChanged` event after the pipeline has applied.\n   *\n   * @param page - The target zero-based page index. Out-of-range values are clamped.\n   * @returns `true` if the change was applied, `false` if it was cancelled or a no-op.\n   */\n  public async gotoPage(page: number): Promise<boolean> {\n    const next = this.clamp(page);\n    if (next === this.page) return false;\n\n    if (!this.#emitChanging(next, this.pageSize)) {\n      return false;\n    }\n\n    this.page = next;\n    this.host.requestUpdate(PIPELINE);\n    await this.host.updateComplete;\n    this.#emitChanged();\n    return true;\n  }\n\n  /**\n   * Sets the current page size and resets to the first page.\n   *\n   * @param size - The new page size. Must be a positive integer.\n   * @returns `true` if the change was applied, `false` if it was cancelled or a no-op.\n   */\n  public async setPageSize(size: number): Promise<boolean> {\n    const next = Math.max(1, Math.trunc(size));\n    if (next === this.pageSize) return false;\n\n    if (!this.#emitChanging(0, next)) {\n      return false;\n    }\n\n    this.pageSize = next;\n    this.page = 0;\n    this.host.requestUpdate(PIPELINE);\n    await this.host.updateComplete;\n    this.#emitChanged();\n    return true;\n  }\n\n  /**\n   * Navigates to the next page if not already on the last one.\n   */\n  public nextPage() {\n    return this.gotoPage(this.page + 1);\n  }\n\n  /**\n   * Navigates to the previous page if not already on the first one.\n   */\n  public previousPage() {\n    return this.gotoPage(this.page - 1);\n  }\n\n  /**\n   * Navigates to the first page.\n   */\n  public firstPage() {\n    return this.gotoPage(0);\n  }\n\n  /**\n   * Navigates to the last page.\n   */\n  public lastPage() {\n    return this.gotoPage(this.pageCount - 1);\n  }\n}\n"]}

package/controllers/reorder.d.ts

@@ -0,0 +1,78 @@
+import type { ReactiveController } from 'lit';
+import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
+/**
+ * Live drag state surfaced to the header row so it can render the floating
+ * "ghost" element that follows the cursor.
+ *
+ * @remarks
+ * The dragged column itself stays in the columns array — we live-swap it
+ * with neighbours as the cursor crosses their midpoints, so the rendered
+ * order updates while the user is still dragging. The ghost is purely a
+ * visual indicator of what the user is grabbing.
+ */
+interface ReorderState<T> {
+    /** The column currently being dragged. */
+    sourceKey: Keys<T>;
+    /** Ghost position (viewport-relative top-left, in CSS pixels). */
+    ghostX: number;
+    ghostY: number;
+    /** Ghost size — fixed at the source header's initial bounding rect. */
+    ghostWidth: number;
+    ghostHeight: number;
+    /** Cursor offset within the ghost so the grab point stays under the cursor. */
+    pointerOffsetX: number;
+    pointerOffsetY: number;
+    /** Display label for the ghost (header text or column key). */
+    label: string;
+}
+/**
+ * Reactive controller backing pointer-driven column reordering with a
+ * floating ghost and live mid-drag swaps.
+ *
+ * @remarks
+ * Headers feed `pointerdown` / `pointermove` / `pointerup` events into the
+ * controller. While dragging, the controller updates the ghost position and
+ * decides whether the cursor has crossed an adjacent column's midpoint —
+ * if so it calls {@link ApexGrid.moveColumn} immediately, so the swap
+ * happens during the drag instead of waiting for drop. The same cancellable
+ * `columnMoving` / follow-up `columnMoved` event pipeline applies for
+ * every swap.
+ */
+export declare class ReorderController<T extends object> implements ReactiveController {
+    #private;
+    protected host: GridHost<T>;
+    state: ReorderState<T> | null;
+    constructor(host: GridHost<T>);
+    hostConnected(): void;
+    protected get headerRow(): (HTMLElement & {
+        headers?: Array<HTMLElement & {
+            column: ColumnConfiguration<T>;
+        }>;
+    }) | undefined;
+    /**
+     * Whether reordering is enabled for the given column.
+     */
+    isDraggable(column: ColumnConfiguration<T>): boolean;
+    /**
+     * Whether `source` may be dropped onto `target`. Cross-pinning-group moves
+     * are blocked so the drag can't escape its pin region.
+     */
+    canDrop(source: ColumnConfiguration<T>, target: ColumnConfiguration<T>): boolean;
+    /**
+     * Begins a drag from `sourceKey`. Captures the source's bounding rect and
+     * the cursor offset within it so the ghost stays anchored to the grab
+     * point as the cursor moves.
+     */
+    start(sourceKey: Keys<T>, sourceRect: DOMRect, initialClientX: number, initialClientY: number, label: string): void;
+    /**
+     * Updates the ghost position and decides whether to swap with an adjacent
+     * column.
+     */
+    move(clientX: number, clientY: number): void;
+    /**
+     * Ends the drag session. The columns are already in their final order
+     * because we live-swapped during the drag, so there's nothing to commit.
+     */
+    end(): void;
+}
+export {};

package/controllers/reorder.js

@@ -0,0 +1,124 @@
+import { awaitChildUpdates, captureRect, playFlip } from '../internal/flip.js';
+export class ReorderController {
+    #swapping;
+    constructor(host) {
+        this.host = host;
+        this.state = null;
+        this.#swapping = false;
+        this.host.addController(this);
+    }
+    hostConnected() { }
+    get headerRow() {
+        return this.host.headerRow;
+    }
+    isDraggable(column) {
+        if (!this.host.columnReordering)
+            return false;
+        if (column.hidden)
+            return false;
+        return column.reorderable !== false;
+    }
+    canDrop(source, target) {
+        if (source.key === target.key)
+            return false;
+        if (!this.isDraggable(source) || !this.isDraggable(target))
+            return false;
+        return (source.pinned ?? null) === (target.pinned ?? null);
+    }
+    start(sourceKey, sourceRect, initialClientX, initialClientY, label) {
+        this.state = {
+            sourceKey,
+            ghostX: sourceRect.left,
+            ghostY: sourceRect.top,
+            ghostWidth: sourceRect.width,
+            ghostHeight: sourceRect.height,
+            pointerOffsetX: initialClientX - sourceRect.left,
+            pointerOffsetY: initialClientY - sourceRect.top,
+            label,
+        };
+        this.host.requestUpdate();
+    }
+    move(clientX, clientY) {
+        if (!this.state)
+            return;
+        this.state = {
+            ...this.state,
+            ghostX: clientX - this.state.pointerOffsetX,
+            ghostY: clientY - this.state.pointerOffsetY,
+        };
+        this.host.requestUpdate();
+        void this.#checkSwap(clientX);
+    }
+    end() {
+        if (!this.state)
+            return;
+        this.state = null;
+        this.host.requestUpdate();
+    }
+    async #checkSwap(clientX) {
+        if (!this.state || this.#swapping)
+            return;
+        const source = this.host.getColumn(this.state.sourceKey);
+        if (!source)
+            return;
+        const headerRow = this.headerRow;
+        if (!headerRow?.headers)
+            return;
+        const target = headerRow.headers.find((h) => {
+            const rect = h.getBoundingClientRect();
+            return clientX >= rect.left && clientX < rect.right;
+        });
+        if (!target || target.column.key === source.key)
+            return;
+        if (!this.canDrop(source, target.column))
+            return;
+        const rect = target.getBoundingClientRect();
+        const midpoint = rect.left + rect.width / 2;
+        const visibleColumns = this.host.columns.filter((c) => !c.hidden);
+        const sourceIdx = visibleColumns.findIndex((c) => c.key === source.key);
+        const targetIdx = visibleColumns.findIndex((c) => c.key === target.column.key);
+        if (sourceIdx === -1 || targetIdx === -1)
+            return;
+        let position;
+        if (sourceIdx < targetIdx) {
+            if (clientX < midpoint)
+                return;
+            position = 'after';
+        }
+        else {
+            if (clientX > midpoint)
+                return;
+            position = 'before';
+        }
+        this.#swapping = true;
+        try {
+            const before = this.#captureCellRects();
+            await this.host.moveColumn(source.key, target.column.key, position);
+            await this.host.updateComplete;
+            await awaitChildUpdates([
+                this.headerRow,
+                ...this.host.rows,
+            ]);
+            playFlip(before, 'x');
+        }
+        finally {
+            this.#swapping = false;
+        }
+    }
+    #captureCellRects() {
+        const entries = [];
+        const headerRow = this.headerRow;
+        if (headerRow?.headers) {
+            for (const header of headerRow.headers) {
+                entries.push(captureRect(header));
+            }
+        }
+        for (const row of this.host.rows) {
+            for (const cell of row.cells) {
+                entries.push(captureRect(cell));
+            }
+        }
+        return entries;
+    }
+}
+//# sourceMappingURL=reorder.js.map

package/controllers/reorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorder.js","sourceRoot":"","sources":["../../src/controllers/reorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAkB,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AA0C/F,MAAM,OAAO,iBAAiB;IAI5B,SAAS,CAAS;IAElB,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QALhC,UAAK,GAA2B,IAAI,CAAC;QAG5C,cAAS,GAAG,KAAK,CAAC;QAGhB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAEzB,IAAc,SAAS;QAErB,OAAO,IAAI,CAAC,IAAI,CAAC,SAEJ,CAAC;IAChB,CAAC;IAKM,WAAW,CAAC,MAA8B;QAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO,KAAK,CAAC;QAC9C,IAAI,MAAM,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAChC,OAAO,MAAM,CAAC,WAAW,KAAK,KAAK,CAAC;IACtC,CAAC;IAMM,OAAO,CAAC,MAA8B,EAAE,MAA8B;QAC3E,IAAI,MAAM,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG;YAAE,OAAO,KAAK,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;YAAE,OAAO,KAAK,CAAC;QACzE,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC;IAC7D,CAAC;IAOM,KAAK,CACV,SAAkB,EAClB,UAAmB,EACnB,cAAsB,EACtB,cAAsB,EACtB,KAAa;QAEb,IAAI,CAAC,KAAK,GAAG;YACX,SAAS;YACT,MAAM,EAAE,UAAU,CAAC,IAAI;YACvB,MAAM,EAAE,UAAU,CAAC,GAAG;YACtB,UAAU,EAAE,UAAU,CAAC,KAAK;YAC5B,WAAW,EAAE,UAAU,CAAC,MAAM;YAC9B,cAAc,EAAE,cAAc,GAAG,UAAU,CAAC,IAAI;YAChD,cAAc,EAAE,cAAc,GAAG,UAAU,CAAC,GAAG;YAC/C,KAAK;SACN,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAMM,IAAI,CAAC,OAAe,EAAE,OAAe;QAC1C,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc;YAC3C,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc;SAC5C,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,KAAK,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAMM,GAAG;QACR,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,OAAe;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,SAAS,EAAE,OAAO;YAAE,OAAO;QAGhC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YAC1C,MAAM,IAAI,GAAG,CAAC,CAAC,qBAAqB,EAAE,CAAC;YACvC,OAAO,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;QACtD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG;YAAE,OAAO;QACxD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;YAAE,OAAO;QAIjD,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAC5C,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAClE,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC;QACxE,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/E,IAAI,SAAS,KAAK,CAAC,CAAC,IAAI,SAAS,KAAK,CAAC,CAAC;YAAE,OAAO;QAEjD,IAAI,QAA4B,CAAC;QACjC,IAAI,SAAS,GAAG,SAAS,EAAE,CAAC;YAE1B,IAAI,OAAO,GAAG,QAAQ;gBAAE,OAAO;YAC/B,QAAQ,GAAG,OAAO,CAAC;QACrB,CAAC;aAAM,CAAC;YAEN,IAAI,OAAO,GAAG,QAAQ;gBAAE,OAAO;YAC/B,QAAQ,GAAG,QAAQ,CAAC;QACtB,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACxC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YACpE,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;YAI/B,MAAM,iBAAiB,CAAC;gBACtB,IAAI,CAAC,SAAwE;gBAC7E,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI;aAClB,CAAC,CAAC;YACH,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACxB,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAQD,iBAAiB;QACf,MAAM,OAAO,GAAgB,EAAE,CAAC;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,SAAS,EAAE,OAAO,EAAE,CAAC;YACvB,KAAK,MAAM,MAAM,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACvC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;QACD,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjC,KAAK,MAAM,IAAI,IAAI,GAAG,CAAC,KAAK,EAAE,CAAC;gBAC7B,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,IAA8B,CAAC,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;CACF","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { awaitChildUpdates, captureRect, type FlipEntry, playFlip } from '../internal/flip.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\n\n/**\n * Live drag state surfaced to the header row so it can render the floating\n * \"ghost\" element that follows the cursor.\n *\n * @remarks\n * The dragged column itself stays in the columns array — we live-swap it\n * with neighbours as the cursor crosses their midpoints, so the rendered\n * order updates while the user is still dragging. The ghost is purely a\n * visual indicator of what the user is grabbing.\n */\ninterface ReorderState<T> {\n  /** The column currently being dragged. */\n  sourceKey: Keys<T>;\n  /** Ghost position (viewport-relative top-left, in CSS pixels). */\n  ghostX: number;\n  ghostY: number;\n  /** Ghost size — fixed at the source header's initial bounding rect. */\n  ghostWidth: number;\n  ghostHeight: number;\n  /** Cursor offset within the ghost so the grab point stays under the cursor. */\n  pointerOffsetX: number;\n  pointerOffsetY: number;\n  /** Display label for the ghost (header text or column key). */\n  label: string;\n}\n\n/**\n * Reactive controller backing pointer-driven column reordering with a\n * floating ghost and live mid-drag swaps.\n *\n * @remarks\n * Headers feed `pointerdown` / `pointermove` / `pointerup` events into the\n * controller. While dragging, the controller updates the ghost position and\n * decides whether the cursor has crossed an adjacent column's midpoint —\n * if so it calls {@link ApexGrid.moveColumn} immediately, so the swap\n * happens during the drag instead of waiting for drop. The same cancellable\n * `columnMoving` / follow-up `columnMoved` event pipeline applies for\n * every swap.\n */\nexport class ReorderController<T extends object> implements ReactiveController {\n  public state: ReorderState<T> | null = null;\n\n  /** Re-entrancy guard so a slow `moveColumn` can't trigger a second swap. */\n  #swapping = false;\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  protected get headerRow() {\n    // @ts-expect-error - protected member access\n    return this.host.headerRow as\n      | (HTMLElement & { headers?: Array<HTMLElement & { column: ColumnConfiguration<T> }> })\n      | undefined;\n  }\n\n  /**\n   * Whether reordering is enabled for the given column.\n   */\n  public isDraggable(column: ColumnConfiguration<T>): boolean {\n    if (!this.host.columnReordering) return false;\n    if (column.hidden) return false;\n    return column.reorderable !== false;\n  }\n\n  /**\n   * Whether `source` may be dropped onto `target`. Cross-pinning-group moves\n   * are blocked so the drag can't escape its pin region.\n   */\n  public canDrop(source: ColumnConfiguration<T>, target: ColumnConfiguration<T>): boolean {\n    if (source.key === target.key) return false;\n    if (!this.isDraggable(source) || !this.isDraggable(target)) return false;\n    return (source.pinned ?? null) === (target.pinned ?? null);\n  }\n\n  /**\n   * Begins a drag from `sourceKey`. Captures the source's bounding rect and\n   * the cursor offset within it so the ghost stays anchored to the grab\n   * point as the cursor moves.\n   */\n  public start(\n    sourceKey: Keys<T>,\n    sourceRect: DOMRect,\n    initialClientX: number,\n    initialClientY: number,\n    label: string\n  ): void {\n    this.state = {\n      sourceKey,\n      ghostX: sourceRect.left,\n      ghostY: sourceRect.top,\n      ghostWidth: sourceRect.width,\n      ghostHeight: sourceRect.height,\n      pointerOffsetX: initialClientX - sourceRect.left,\n      pointerOffsetY: initialClientY - sourceRect.top,\n      label,\n    };\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Updates the ghost position and decides whether to swap with an adjacent\n   * column.\n   */\n  public move(clientX: number, clientY: number): void {\n    if (!this.state) return;\n    this.state = {\n      ...this.state,\n      ghostX: clientX - this.state.pointerOffsetX,\n      ghostY: clientY - this.state.pointerOffsetY,\n    };\n    this.host.requestUpdate();\n    void this.#checkSwap(clientX);\n  }\n\n  /**\n   * Ends the drag session. The columns are already in their final order\n   * because we live-swapped during the drag, so there's nothing to commit.\n   */\n  public end(): void {\n    if (!this.state) return;\n    this.state = null;\n    this.host.requestUpdate();\n  }\n\n  async #checkSwap(clientX: number): Promise<void> {\n    if (!this.state || this.#swapping) return;\n    const source = this.host.getColumn(this.state.sourceKey);\n    if (!source) return;\n    const headerRow = this.headerRow;\n    if (!headerRow?.headers) return;\n\n    // Find the visible header whose box currently contains the cursor X.\n    const target = headerRow.headers.find((h) => {\n      const rect = h.getBoundingClientRect();\n      return clientX >= rect.left && clientX < rect.right;\n    });\n    if (!target || target.column.key === source.key) return;\n    if (!this.canDrop(source, target.column)) return;\n\n    // Only swap once the cursor crosses the target's midpoint, so we don't\n    // bounce back and forth as soon as the ghost touches the edge.\n    const rect = target.getBoundingClientRect();\n    const midpoint = rect.left + rect.width / 2;\n    const visibleColumns = this.host.columns.filter((c) => !c.hidden);\n    const sourceIdx = visibleColumns.findIndex((c) => c.key === source.key);\n    const targetIdx = visibleColumns.findIndex((c) => c.key === target.column.key);\n    if (sourceIdx === -1 || targetIdx === -1) return;\n\n    let position: 'before' | 'after';\n    if (sourceIdx < targetIdx) {\n      // Dragging right — swap when the cursor crosses past the target's centre.\n      if (clientX < midpoint) return;\n      position = 'after';\n    } else {\n      // Dragging left — swap when the cursor crosses before the target's centre.\n      if (clientX > midpoint) return;\n      position = 'before';\n    }\n\n    this.#swapping = true;\n    try {\n      const before = this.#captureCellRects();\n      await this.host.moveColumn(source.key, target.column.key, position);\n      await this.host.updateComplete;\n      // Child rows + header row schedule their own updates one microtask\n      // after the grid — wait for them so the cells have actually moved\n      // before measuring the \"Last\" rect.\n      await awaitChildUpdates([\n        this.headerRow as unknown as { updateComplete: Promise<unknown> } | undefined,\n        ...this.host.rows,\n      ]);\n      playFlip(before, 'x');\n    } finally {\n      this.#swapping = false;\n    }\n  }\n\n  /**\n   * Snapshots the bounding rect of every header + body cell before a\n   * swap. Used as the \"First\" step of a FLIP — after `moveColumn` resolves,\n   * `playFlip` computes the delta against the new rect and animates each\n   * element from its old position back to identity.\n   */\n  #captureCellRects(): FlipEntry[] {\n    const entries: FlipEntry[] = [];\n    const headerRow = this.headerRow;\n    if (headerRow?.headers) {\n      for (const header of headerRow.headers) {\n        entries.push(captureRect(header));\n      }\n    }\n    for (const row of this.host.rows) {\n      for (const cell of row.cells) {\n        entries.push(captureRect(cell as unknown as HTMLElement));\n      }\n    }\n    return entries;\n  }\n}\n"]}

package/{dist/src/controllers → controllers}/resize.d.ts

@@ -1,5 +1,5 @@
-import { nothing, ReactiveController } from 'lit';
-import ApexGridHeader from '../components/header.js';
+import { nothing, type ReactiveController } from 'lit';
+import type ApexGridHeader from '../components/header.js';
 import type { ColumnConfiguration, GridHost } from '../internal/types.js';
 export declare class ResizeController<T extends object> implements ReactiveController {
     #private;
@@ -25,4 +25,3 @@ export declare class ResizeController<T extends object> implements ReactiveContr
      */
     renderIndicator(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
-//# sourceMappingURL=resize.d.ts.map

package/controllers/resize.js

@@ -0,0 +1,52 @@
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';
+export class ResizeController {
+    constructor(host) {
+        this.host = host;
+        this.indicatorActive = false;
+        this.indicatorOffset = 0;
+        this.host.addController(this);
+    }
+    #maxSize(key, headerWidth) {
+        const max = this.host.rows
+            .map((row) => row.cells.find((cell) => cell.column.key === key))
+            .reduce((prev, current) => (current.offsetWidth > prev ? current.offsetWidth : prev), 0);
+        return Math.max(...[MIN_COL_RESIZE_WIDTH, max, headerWidth]);
+    }
+    start(header) {
+        this.indicatorActive = true;
+        this.indicatorOffset = header.offsetLeft + header.offsetWidth;
+        this.host.requestUpdate();
+    }
+    stop() {
+        this.indicatorActive = false;
+        this.host.requestUpdate();
+    }
+    resize(column, width, sizerOffset) {
+        if (sizerOffset) {
+            this.indicatorOffset = sizerOffset;
+        }
+        column.width = `${width}px`;
+        this.host.requestUpdate();
+    }
+    async autosize(column, header) {
+        column.width = 'max-content';
+        this.host.requestUpdate();
+        await this.host.updateComplete;
+        column.width = `${this.#maxSize(column.key, header.offsetWidth)}px`;
+        this.host.requestUpdate();
+    }
+    hostConnected() { }
+    renderIndicator() {
+        return this.indicatorActive
+            ? html `<div
+          part="resize-indicator"
+          style=${styleMap({
+                transform: `translateX(${this.indicatorOffset}px)`,
+            })}
+        ></div>`
+            : nothing;
+    }
+}
+//# sourceMappingURL=resize.js.map