apex-grid 1.0.1 → 2.0.0

package/components/header.js

@@ -0,0 +1,263 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { gridStateContext } from '../controllers/state.js';
+import { MIN_COL_RESIZE_WIDTH, SORT_ICON_ASCENDING, SORT_ICON_DESCENDING, } from '../internal/constants.js';
+import { renderIcon } from '../internal/icons.js';
+import { partNameMap } from '../internal/part-map.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_HEADER_TAG } from '../internal/tags.js';
+import { styles } from '../styles/header-cell/header-cell.css.js';
+const DRAG_THRESHOLD_PX = 4;
+export default class ApexGridHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colindex = 0;
+        this.#handleResize = ({ clientX }) => {
+            const { left } = this.getBoundingClientRect();
+            const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);
+            const x = this.offsetLeft + width;
+            this.resizeController.resize(this.column, width, x);
+        };
+        this.#handlePointerLost = () => {
+            this.resizeController.indicatorActive = false;
+            this.removeEventListener('pointermove', this.#handleResize);
+            this.resizeController.stop();
+        };
+        this.#handleAutosize = () => this.resizeController.autosize(this.column, this);
+        this.#dragStartX = 0;
+        this.#dragStartY = 0;
+        this.#dragPointerId = -1;
+        this.#isDragging = false;
+        this.#handleReorderPointerDown = (event) => {
+            if (!this.isDraggable)
+                return;
+            if (event.button !== 0)
+                return;
+            const path = event.composedPath();
+            const target = path[0];
+            if (target instanceof Element && target.closest?.('[part~="resizable"], [part~="action"]')) {
+                return;
+            }
+            this.#dragStartX = event.clientX;
+            this.#dragStartY = event.clientY;
+            this.#dragPointerId = event.pointerId;
+            this.addEventListener('pointermove', this.#handleReorderPointerMove);
+            this.addEventListener('pointerup', this.#handleReorderPointerUp);
+            this.addEventListener('pointercancel', this.#handleReorderPointerUp);
+        };
+        this.#handleReorderPointerMove = (event) => {
+            if (event.pointerId !== this.#dragPointerId)
+                return;
+            if (!this.#isDragging) {
+                const dx = event.clientX - this.#dragStartX;
+                const dy = event.clientY - this.#dragStartY;
+                if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX)
+                    return;
+                this.#isDragging = true;
+                this.setPointerCapture(event.pointerId);
+                this.setAttribute('data-dragging', '');
+                const rect = this.getBoundingClientRect();
+                const label = this.column.headerText ?? String(this.column.key);
+                this.reorderController.start(this.column.key, rect, this.#dragStartX, this.#dragStartY, label);
+            }
+            this.reorderController.move(event.clientX, event.clientY);
+        };
+        this.#handleReorderPointerUp = (event) => {
+            if (event.pointerId !== this.#dragPointerId)
+                return;
+            this.removeEventListener('pointermove', this.#handleReorderPointerMove);
+            this.removeEventListener('pointerup', this.#handleReorderPointerUp);
+            this.removeEventListener('pointercancel', this.#handleReorderPointerUp);
+            try {
+                if (this.hasPointerCapture(event.pointerId)) {
+                    this.releasePointerCapture(event.pointerId);
+                }
+            }
+            catch {
+            }
+            if (this.#isDragging) {
+                this.#isDragging = false;
+                this.removeAttribute('data-dragging');
+                this.reorderController.end();
+            }
+            this.#dragPointerId = -1;
+        };
+    }
+    static get tagName() {
+        return GRID_HEADER_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(ApexGridHeader);
+    }
+    get context() {
+        return {
+            parent: this,
+            column: this.column,
+        };
+    }
+    get isSortable() {
+        return Boolean(this.column.sort);
+    }
+    get resizeController() {
+        return this.state.resizing;
+    }
+    get reorderController() {
+        return this.state.reordering;
+    }
+    get isDraggable() {
+        return Boolean(this.state?.reordering?.isDraggable(this.column));
+    }
+    #addResizeEventHandlers() {
+        const config = { once: true };
+        this.addEventListener('gotpointercapture', () => {
+            this.resizeController.indicatorActive = true;
+        }, config);
+        this.addEventListener('lostpointercapture', this.#handlePointerLost, config);
+        this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);
+        this.addEventListener('pointermove', this.#handleResize);
+    }
+    #handleClick(e) {
+        e.stopPropagation();
+        this.state.sorting.sortFromHeaderClick(this.column);
+    }
+    #handleResize;
+    #handleResizeStart(ev) {
+        const { target, pointerId } = ev;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.#addResizeEventHandlers();
+        this.resizeController.start(this);
+        target.setPointerCapture(pointerId);
+    }
+    #handlePointerLost;
+    #handleAutosize;
+    #dragStartX;
+    #dragStartY;
+    #dragPointerId;
+    #isDragging;
+    #handleReorderPointerDown;
+    #handleReorderPointerMove;
+    #handleReorderPointerUp;
+    updated() {
+        if (this.isDraggable) {
+            this.setAttribute('data-reorderable', '');
+        }
+        else {
+            this.removeAttribute('data-reorderable');
+        }
+        if (this.colindex > 0) {
+            this.setAttribute('aria-colindex', String(this.colindex));
+        }
+        if (this.isSortable) {
+            const sort = this.state?.sorting.state.get(this.column.key);
+            const dir = sort?.direction;
+            this.setAttribute('aria-sort', dir === 'ascending' ? 'ascending' : dir === 'descending' ? 'descending' : 'none');
+        }
+        else {
+            this.removeAttribute('aria-sort');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'columnheader');
+        this.addEventListener('pointerdown', this.#handleReorderPointerDown);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('pointerdown', this.#handleReorderPointerDown);
+        super.disconnectedCallback();
+    }
+    renderSortPart() {
+        const state = this.state.sorting.state.get(this.column.key);
+        const idx = Array.from(this.state.sorting.state.values()).indexOf(state);
+        const attr = this.state.host.sortConfiguration.multiple
+            ? idx > -1
+                ? idx + 1
+                : nothing
+            : nothing;
+        const icon = state
+            ? state.direction === 'ascending'
+                ? SORT_ICON_ASCENDING
+                : SORT_ICON_DESCENDING
+            : SORT_ICON_ASCENDING;
+        const label = state?.direction === 'ascending'
+            ? 'Sorted ascending. Activate to sort descending.'
+            : state?.direction === 'descending'
+                ? 'Sorted descending. Activate to clear sort.'
+                : 'Not sorted. Activate to sort ascending.';
+        return state || this.isSortable
+            ? this.isSortable
+                ? html `<button
+            type="button"
+            part=${partNameMap({ action: true, sorted: !!state?.direction })}
+            data-sort-index=${attr === nothing ? '' : attr}
+            aria-label=${label}
+            @click=${this.#handleClick}
+          >
+            ${renderIcon(icon, {
+                    part: partNameMap({ 'sorting-action': !!state }),
+                })}
+          </button>`
+                : html `<span
+            part=${partNameMap({ action: true, sorted: !!state?.direction })}
+            data-sort-index=${attr === nothing ? '' : attr}
+            aria-hidden="true"
+          >
+            ${renderIcon(icon, {
+                    part: partNameMap({ 'sorting-action': !!state }),
+                })}
+          </span>`
+            : nothing;
+    }
+    renderContentPart() {
+        const defaultContent = this.column.headerText ?? this.column.key;
+        const template = this.column.headerTemplate;
+        return html `
+      <span part="title">
+        <span>${template ? template(this.context) : html `${defaultContent}`}</span>
+      </span>
+    `;
+    }
+    renderResizePart() {
+        return this.column.resizable
+            ? html `<span
+          part="resizable"
+          @dblclick=${this.#handleAutosize}
+          @pointerdown=${this.#handleResizeStart}
+        ></span>`
+            : nothing;
+    }
+    render() {
+        return html `
+      <div
+        part=${partNameMap({
+            content: true,
+            sortable: this.isSortable,
+            resizing: this.resizeController.indicatorActive,
+        })}
+      >
+        ${this.renderContentPart()}
+        <div part="actions">${this.renderSortPart()}</div>
+      </div>
+      ${this.renderResizePart()}
+    `;
+    }
+}
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexGridHeader.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridHeader.prototype, "column", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], ApexGridHeader.prototype, "colindex", void 0);
+//# sourceMappingURL=header.js.map

package/components/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport {\n  MIN_COL_RESIZE_WIDTH,\n  SORT_ICON_ASCENDING,\n  SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ApexHeaderContext, ColumnConfiguration } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\n\n/** Pixels of pointer travel before a hold turns into a drag — avoids\n * accidental drags on click. */\nconst DRAG_THRESHOLD_PX = 4;\n\nexport default class ApexGridHeader<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(ApexGridHeader);\n  }\n\n  protected get context(): ApexHeaderContext<T> {\n    return {\n      parent: this,\n      column: this.column,\n    };\n  }\n\n  protected get isSortable() {\n    return Boolean(this.column.sort);\n  }\n\n  protected get resizeController() {\n    return this.state.resizing;\n  }\n\n  protected get reorderController() {\n    return this.state.reordering;\n  }\n\n  protected get isDraggable() {\n    return Boolean(this.state?.reordering?.isDraggable(this.column));\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  /** 1-based column index passed in by the parent header row for `aria-colindex`. */\n  @property({ attribute: false, type: Number })\n  public colindex = 0;\n\n  #addResizeEventHandlers() {\n    const config: AddEventListenerOptions = { once: true };\n\n    this.addEventListener(\n      'gotpointercapture',\n      () => {\n        this.resizeController.indicatorActive = true;\n      },\n      config\n    );\n    this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n    this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n    this.addEventListener('pointermove', this.#handleResize);\n  }\n\n  #handleClick(e: Event) {\n    e.stopPropagation();\n    this.state.sorting.sortFromHeaderClick(this.column);\n  }\n\n  #handleResize = ({ clientX }: PointerEvent) => {\n    const { left } = this.getBoundingClientRect();\n    const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n    const x = this.offsetLeft + width;\n\n    this.resizeController.resize(this.column, width, x);\n  };\n\n  #handleResizeStart(ev: PointerEvent) {\n    const { target, pointerId } = ev;\n\n    ev.preventDefault();\n    // Resize takes priority over reorder — stop the event so the header's\n    // pointerdown listener doesn't also start arming a drag.\n    ev.stopPropagation();\n\n    this.#addResizeEventHandlers();\n    this.resizeController.start(this);\n\n    (target as HTMLElement).setPointerCapture(pointerId);\n  }\n\n  #handlePointerLost = () => {\n    this.resizeController.indicatorActive = false;\n    this.removeEventListener('pointermove', this.#handleResize);\n    this.resizeController.stop();\n  };\n\n  #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n  // --- Reorder (pointer-driven) ------------------------------------------\n\n  #dragStartX = 0;\n  #dragStartY = 0;\n  #dragPointerId = -1;\n  #isDragging = false;\n\n  #handleReorderPointerDown = (event: PointerEvent) => {\n    if (!this.isDraggable) return;\n    if (event.button !== 0) return;\n    // Skip if the user grabbed an interactive sub-part of the header — the\n    // resize handle or the sort/action icons. Those have their own handlers\n    // and should not arm a drag.\n    const path = event.composedPath();\n    const target = path[0];\n    if (target instanceof Element && target.closest?.('[part~=\"resizable\"], [part~=\"action\"]')) {\n      return;\n    }\n    this.#dragStartX = event.clientX;\n    this.#dragStartY = event.clientY;\n    this.#dragPointerId = event.pointerId;\n    this.addEventListener('pointermove', this.#handleReorderPointerMove);\n    this.addEventListener('pointerup', this.#handleReorderPointerUp);\n    this.addEventListener('pointercancel', this.#handleReorderPointerUp);\n  };\n\n  #handleReorderPointerMove = (event: PointerEvent) => {\n    if (event.pointerId !== this.#dragPointerId) return;\n    if (!this.#isDragging) {\n      const dx = event.clientX - this.#dragStartX;\n      const dy = event.clientY - this.#dragStartY;\n      if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;\n      // Threshold crossed — start the drag in earnest.\n      this.#isDragging = true;\n      this.setPointerCapture(event.pointerId);\n      this.setAttribute('data-dragging', '');\n      const rect = this.getBoundingClientRect();\n      const label = this.column.headerText ?? String(this.column.key);\n      this.reorderController.start(\n        this.column.key,\n        rect,\n        this.#dragStartX,\n        this.#dragStartY,\n        label\n      );\n    }\n    this.reorderController.move(event.clientX, event.clientY);\n  };\n\n  #handleReorderPointerUp = (event: PointerEvent) => {\n    if (event.pointerId !== this.#dragPointerId) return;\n    this.removeEventListener('pointermove', this.#handleReorderPointerMove);\n    this.removeEventListener('pointerup', this.#handleReorderPointerUp);\n    this.removeEventListener('pointercancel', this.#handleReorderPointerUp);\n    try {\n      if (this.hasPointerCapture(event.pointerId)) {\n        this.releasePointerCapture(event.pointerId);\n      }\n    } catch {\n      /* capture was already released */\n    }\n    if (this.#isDragging) {\n      this.#isDragging = false;\n      this.removeAttribute('data-dragging');\n      this.reorderController.end();\n    }\n    this.#dragPointerId = -1;\n  };\n\n  protected override updated() {\n    // Reflect reorderability as an attribute so SCSS can show the grab\n    // cursor only on columns that can actually be dragged. Tracks both the\n    // grid-level `columnReordering` flag (arriving via context) and the\n    // per-column `reorderable: false` opt-out at runtime.\n    if (this.isDraggable) {\n      this.setAttribute('data-reorderable', '');\n    } else {\n      this.removeAttribute('data-reorderable');\n    }\n    // aria-colindex stays in sync with the parent header row's numbering.\n    if (this.colindex > 0) {\n      this.setAttribute('aria-colindex', String(this.colindex));\n    }\n    // aria-sort communicates current sort direction for this column to AT.\n    if (this.isSortable) {\n      const sort = this.state?.sorting.state.get(this.column.key);\n      const dir = sort?.direction;\n      this.setAttribute(\n        'aria-sort',\n        dir === 'ascending' ? 'ascending' : dir === 'descending' ? 'descending' : 'none'\n      );\n    } else {\n      this.removeAttribute('aria-sort');\n    }\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'columnheader');\n    this.addEventListener('pointerdown', this.#handleReorderPointerDown);\n  }\n\n  public override disconnectedCallback(): void {\n    this.removeEventListener('pointerdown', this.#handleReorderPointerDown);\n    super.disconnectedCallback();\n  }\n\n  protected renderSortPart() {\n    const state = this.state.sorting.state.get(this.column.key);\n    const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n    const attr = this.state.host.sortConfiguration.multiple\n      ? idx > -1\n        ? idx + 1\n        : nothing\n      : nothing;\n    const icon = state\n      ? state.direction === 'ascending'\n        ? SORT_ICON_ASCENDING\n        : SORT_ICON_DESCENDING\n      : SORT_ICON_ASCENDING;\n\n    const label =\n      state?.direction === 'ascending'\n        ? 'Sorted ascending. Activate to sort descending.'\n        : state?.direction === 'descending'\n          ? 'Sorted descending. Activate to clear sort.'\n          : 'Not sorted. Activate to sort ascending.';\n\n    return state || this.isSortable\n      ? this.isSortable\n        ? html`<button\n            type=\"button\"\n            part=${partNameMap({ action: true, sorted: !!state?.direction })}\n            data-sort-index=${attr === nothing ? '' : (attr as number)}\n            aria-label=${label}\n            @click=${this.#handleClick}\n          >\n            ${renderIcon(icon, {\n              part: partNameMap({ 'sorting-action': !!state }),\n            })}\n          </button>`\n        : html`<span\n            part=${partNameMap({ action: true, sorted: !!state?.direction })}\n            data-sort-index=${attr === nothing ? '' : (attr as number)}\n            aria-hidden=\"true\"\n          >\n            ${renderIcon(icon, {\n              part: partNameMap({ 'sorting-action': !!state }),\n            })}\n          </span>`\n      : nothing;\n  }\n\n  protected renderContentPart() {\n    const defaultContent = this.column.headerText ?? this.column.key;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partNameMap({\n          content: true,\n          sortable: this.isSortable,\n          resizing: this.resizeController.indicatorActive,\n        })}\n      >\n        ${this.renderContentPart()}\n        <div part=\"actions\">${this.renderSortPart()}</div>\n      </div>\n      ${this.renderResizePart()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridHeader.tagName]: ApexGridHeader<object>;\n  }\n}\n"]}

package/components/paginator.d.ts

@@ -0,0 +1,56 @@
+import { LitElement, nothing } from 'lit';
+import { type StateController } from '../controllers/state.js';
+/**
+ * Pagination toolbar rendered beneath the grid body.
+ *
+ * @remarks
+ * Drives {@link PaginationController} on the host grid. The component is purely
+ * presentational — page transitions go through the controller so they emit the
+ * cancellable `pageChanging` event and the post-update `pageChanged` event.
+ *
+ * @element apex-grid-paginator
+ *
+ * @csspart paginator - The root container.
+ * @csspart paginator-size - The page-size selector wrapper.
+ * @csspart paginator-info - The "1–25 of 100" status label.
+ * @csspart paginator-controls - The first/prev/next/last button cluster.
+ * @csspart paginator-page - The "Page X of N" status label.
+ */
+export default class ApexGridPaginator<T extends object> extends LitElement {
+    #private;
+    static get tagName(): "apex-grid-paginator";
+    static styles: import("lit").CSSResult;
+    /**
+     * Registers the `<apex-grid-paginator>` element and its dependencies. Idempotent.
+     */
+    static register(): void;
+    state: StateController<T>;
+    /**
+     * The page-size choices rendered in the rows-per-page selector.
+     *
+     * @remarks
+     * Defaults to `[10, 25, 50, 100]`.
+     */
+    pageSizeOptions: number[];
+    /**
+     * Accessible label for the rows-per-page selector.
+     */
+    pageSizeLabel: string;
+    protected get controller(): import("../controllers/pagination.js").PaginationController<T>;
+    protected renderSizeSelect(): import("lit-html").TemplateResult<1>;
+    protected renderInfo(): import("lit-html").TemplateResult<1>;
+    protected renderButton(opts: {
+        id: string;
+        icon: string;
+        label: string;
+        disabled: boolean;
+        onClick: () => void;
+    }): import("lit-html").TemplateResult<1>;
+    protected renderControls(): import("lit-html").TemplateResult<1>;
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [ApexGridPaginator.tagName]: ApexGridPaginator<object>;
+    }
+}

package/components/paginator.js

@@ -0,0 +1,148 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { gridStateContext } from '../controllers/state.js';
+import { renderIcon } from '../internal/icons.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_PAGINATOR_TAG } from '../internal/tags.js';
+import { styles } from '../styles/paginator/paginator.css.js';
+export default class ApexGridPaginator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.pageSizeOptions = [10, 25, 50, 100];
+        this.pageSizeLabel = 'Rows per page';
+        this.#handleSizeChange = (event) => {
+            event.stopPropagation();
+            const next = Number(event.target.value);
+            if (Number.isFinite(next)) {
+                this.controller.setPageSize(next);
+            }
+        };
+        this.#handleControlsKeydown = (event) => {
+            if (event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight' ||
+                event.key === 'ArrowUp' ||
+                event.key === 'ArrowDown') {
+                event.stopPropagation();
+            }
+        };
+    }
+    static get tagName() {
+        return GRID_PAGINATOR_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(ApexGridPaginator);
+    }
+    get controller() {
+        return this.state.pagination;
+    }
+    #handleSizeChange;
+    renderSizeSelect() {
+        const current = this.controller.pageSize;
+        return html `
+      <label part="paginator-size">
+        <span class="visually-hidden">${this.pageSizeLabel}</span>
+        <select
+          aria-label=${this.pageSizeLabel}
+          .value=${String(current)}
+          @change=${this.#handleSizeChange}
+        >
+          ${this.pageSizeOptions.map((size) => html `<option .value=${String(size)} ?selected=${size === current}>${size}</option>`)}
+        </select>
+      </label>
+    `;
+    }
+    renderInfo() {
+        const { page, pageSize, totalItems } = this.controller.state;
+        if (totalItems === 0) {
+            return html `<span part="paginator-info" aria-live="polite">0 of 0</span>`;
+        }
+        const start = page * pageSize + 1;
+        const end = Math.min(totalItems, (page + 1) * pageSize);
+        return html `<span part="paginator-info" aria-live="polite">${start}–${end} of ${totalItems}</span>`;
+    }
+    renderButton(opts) {
+        return html `<button
+      part="paginator-button"
+      id=${opts.id}
+      type="button"
+      aria-label=${opts.label}
+      title=${opts.label}
+      ?disabled=${opts.disabled}
+      @click=${opts.onClick}
+    >
+      ${renderIcon(opts.icon)}
+    </button>`;
+    }
+    #handleControlsKeydown;
+    renderControls() {
+        const { page, pageCount, totalItems } = this.controller.state;
+        const onFirst = page <= 0 || totalItems === 0;
+        const onLast = page >= pageCount - 1 || totalItems === 0;
+        return html `
+      <div
+        part="paginator-controls"
+        role="group"
+        aria-label="Pagination controls"
+        @keydown=${this.#handleControlsKeydown}
+      >
+        ${this.renderButton({
+            id: 'first',
+            icon: 'page-first',
+            label: 'Go to first page',
+            disabled: onFirst,
+            onClick: () => this.controller.firstPage(),
+        })}
+        ${this.renderButton({
+            id: 'previous',
+            icon: 'page-previous',
+            label: 'Go to previous page',
+            disabled: onFirst,
+            onClick: () => this.controller.previousPage(),
+        })}
+        <span part="paginator-page" aria-live="polite">${page + 1} / ${pageCount}</span>
+        ${this.renderButton({
+            id: 'next',
+            icon: 'page-next',
+            label: 'Go to next page',
+            disabled: onLast,
+            onClick: () => this.controller.nextPage(),
+        })}
+        ${this.renderButton({
+            id: 'last',
+            icon: 'page-last',
+            label: 'Go to last page',
+            disabled: onLast,
+            onClick: () => this.controller.lastPage(),
+        })}
+      </div>
+    `;
+    }
+    render() {
+        if (!this.state)
+            return nothing;
+        return html `
+      <div part="paginator" role="navigation" aria-label="Grid pagination">
+        ${this.renderSizeSelect()} ${this.renderInfo()} ${this.renderControls()}
+      </div>
+    `;
+    }
+}
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexGridPaginator.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridPaginator.prototype, "pageSizeOptions", void 0);
+__decorate([
+    property({ type: String, attribute: 'page-size-label' })
+], ApexGridPaginator.prototype, "pageSizeLabel", void 0);
+//# sourceMappingURL=paginator.js.map

package/components/paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginator.js","sourceRoot":"","sources":["../../src/components/paginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_PAGINATOR_TAG } from '../internal/tags.js';\nimport { styles } from '../styles/paginator/paginator.css.js';\n\n/**\n * Pagination toolbar rendered beneath the grid body.\n *\n * @remarks\n * Drives {@link PaginationController} on the host grid. The component is purely\n * presentational — page transitions go through the controller so they emit the\n * cancellable `pageChanging` event and the post-update `pageChanged` event.\n *\n * @element apex-grid-paginator\n *\n * @csspart paginator - The root container.\n * @csspart paginator-size - The page-size selector wrapper.\n * @csspart paginator-info - The \"1–25 of 100\" status label.\n * @csspart paginator-controls - The first/prev/next/last button cluster.\n * @csspart paginator-page - The \"Page X of N\" status label.\n */\nexport default class ApexGridPaginator<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_PAGINATOR_TAG;\n  }\n\n  public static override styles = styles;\n\n  /**\n   * Registers the `<apex-grid-paginator>` element and its dependencies. Idempotent.\n   */\n  public static register() {\n    registerComponent(ApexGridPaginator);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  /**\n   * The page-size choices rendered in the rows-per-page selector.\n   *\n   * @remarks\n   * Defaults to `[10, 25, 50, 100]`.\n   */\n  @property({ attribute: false })\n  public pageSizeOptions: number[] = [10, 25, 50, 100];\n\n  /**\n   * Accessible label for the rows-per-page selector.\n   */\n  @property({ type: String, attribute: 'page-size-label' })\n  public pageSizeLabel = 'Rows per page';\n\n  protected get controller() {\n    return this.state.pagination;\n  }\n\n  #handleSizeChange = (event: Event) => {\n    event.stopPropagation();\n    const next = Number((event.target as HTMLSelectElement).value);\n    if (Number.isFinite(next)) {\n      this.controller.setPageSize(next);\n    }\n  };\n\n  protected renderSizeSelect() {\n    const current = this.controller.pageSize;\n    return html`\n      <label part=\"paginator-size\">\n        <span class=\"visually-hidden\">${this.pageSizeLabel}</span>\n        <select\n          aria-label=${this.pageSizeLabel}\n          .value=${String(current)}\n          @change=${this.#handleSizeChange}\n        >\n          ${this.pageSizeOptions.map(\n            (size) =>\n              html`<option .value=${String(size)} ?selected=${size === current}>${size}</option>`\n          )}\n        </select>\n      </label>\n    `;\n  }\n\n  protected renderInfo() {\n    const { page, pageSize, totalItems } = this.controller.state;\n    if (totalItems === 0) {\n      return html`<span part=\"paginator-info\" aria-live=\"polite\">0 of 0</span>`;\n    }\n    const start = page * pageSize + 1;\n    const end = Math.min(totalItems, (page + 1) * pageSize);\n    return html`<span part=\"paginator-info\" aria-live=\"polite\">${start}–${end} of ${totalItems}</span>`;\n  }\n\n  protected renderButton(opts: {\n    id: string;\n    icon: string;\n    label: string;\n    disabled: boolean;\n    onClick: () => void;\n  }) {\n    return html`<button\n      part=\"paginator-button\"\n      id=${opts.id}\n      type=\"button\"\n      aria-label=${opts.label}\n      title=${opts.label}\n      ?disabled=${opts.disabled}\n      @click=${opts.onClick}\n    >\n      ${renderIcon(opts.icon)}\n    </button>`;\n  }\n\n  #handleControlsKeydown = (event: KeyboardEvent) => {\n    // Keep arrow-key navigation inside the paginator instead of bubbling into the grid.\n    if (\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowDown'\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  protected renderControls() {\n    const { page, pageCount, totalItems } = this.controller.state;\n    const onFirst = page <= 0 || totalItems === 0;\n    const onLast = page >= pageCount - 1 || totalItems === 0;\n\n    return html`\n      <div\n        part=\"paginator-controls\"\n        role=\"group\"\n        aria-label=\"Pagination controls\"\n        @keydown=${this.#handleControlsKeydown}\n      >\n        ${this.renderButton({\n          id: 'first',\n          icon: 'page-first',\n          label: 'Go to first page',\n          disabled: onFirst,\n          onClick: () => this.controller.firstPage(),\n        })}\n        ${this.renderButton({\n          id: 'previous',\n          icon: 'page-previous',\n          label: 'Go to previous page',\n          disabled: onFirst,\n          onClick: () => this.controller.previousPage(),\n        })}\n        <span part=\"paginator-page\" aria-live=\"polite\">${page + 1} / ${pageCount}</span>\n        ${this.renderButton({\n          id: 'next',\n          icon: 'page-next',\n          label: 'Go to next page',\n          disabled: onLast,\n          onClick: () => this.controller.nextPage(),\n        })}\n        ${this.renderButton({\n          id: 'last',\n          icon: 'page-last',\n          label: 'Go to last page',\n          disabled: onLast,\n          onClick: () => this.controller.lastPage(),\n        })}\n      </div>\n    `;\n  }\n\n  protected override render() {\n    if (!this.state) return nothing;\n    return html`\n      <div part=\"paginator\" role=\"navigation\" aria-label=\"Grid pagination\">\n        ${this.renderSizeSelect()} ${this.renderInfo()} ${this.renderControls()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridPaginator.tagName]: ApexGridPaginator<object>;\n  }\n}\n"]}

package/components/row.d.ts

@@ -0,0 +1,43 @@
+import { LitElement, nothing } from 'lit';
+import { type StateController } from '../controllers/state.js';
+import type { ActiveNode, ColumnConfiguration, Keys } from '../internal/types.js';
+import ApexGridCell from './cell.js';
+/**
+ * Component representing the DOM row in the Apex grid.
+ */
+export default class ApexGridRow<T extends object> extends LitElement {
+    static get tagName(): "apex-grid-row";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    protected _cells: NodeListOf<ApexGridCell<T>>;
+    data: T;
+    columns: Array<ColumnConfiguration<T>>;
+    /** Cumulative pin offsets (px) keyed by column key. */
+    pinOffsets: Map<unknown, number>;
+    get cells(): ApexGridCell<T>[];
+    state: StateController<T>;
+    activeNode: ActiveNode<T>;
+    index: number;
+    /** Reflects current selection state so SCSS can highlight the row. */
+    selected: boolean;
+    /** Reflects current expansion state so SCSS can rotate the chevron. */
+    expanded: boolean;
+    /** The column key currently being edited in this row, or `null`. */
+    editingKey: Keys<T> | null;
+    connectedCallback(): void;
+    /**
+     * The number of "chrome" rows (header + filter) above the body. Used to
+     * derive `aria-rowindex` from {@link index}. Set by the parent grid.
+     */
+    ariaRowOffset: number;
+    protected willUpdate(): void;
+    protected renderExpansionToggle(colindex: number): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected renderDetailPanel(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected renderSelectionCell(colindex: number): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [ApexGridRow.tagName]: ApexGridRow<object>;
+    }
+}