apex-grid 1.0.0 → 1.1.0

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

@@ -2,7 +2,6 @@ import ApexGridRow from '../components/row.js';
 import { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';
 export class NavigationController {
     get virtualizer() {
-        // @ts-expect-error - Protected member access
         return this.host.scrollContainer;
     }
     get nextNode() {
@@ -15,8 +14,7 @@ export class NavigationController {
         return this.host.columns;
     }
     get firstColumn() {
-        var _a;
-        return (_a = this.host.getColumn(0).key) !== null && _a !== void 0 ? _a : '';
+        return this.host.getColumn(0).key ?? '';
     }
     getPreviousColumn(key) {
         return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)) - 1, 0)].key;
@@ -25,10 +23,11 @@ export class NavigationController {
         return this.columns[Math.min(this.columns.indexOf(this.host.getColumn(key)) + 1, this.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(ApexGridRow.tagName)).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() {
@@ -55,28 +54,24 @@ export class NavigationController {
         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.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),
         });
-        (_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;

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 ApexGridRow from '../components/row.js';\nimport { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';\nimport type { ActiveNode, GridHost, Keys } from '../internal/types.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    })\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() {\n    return this.host.columns;\n  }\n\n  protected get firstColumn() {\n    return this.host.getColumn(0)!.key ?? '';\n  }\n\n  protected getPreviousColumn(key: Keys<T>) {\n    return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)!) - 1, 0)].key;\n  }\n\n  protected getNextColumn(key: Keys<T>) {\n    return this.columns[\n      Math.min(this.columns.indexOf(this.host.getColumn(key)!) + 1, this.columns.length - 1)\n    ].key;\n  }\n\n  protected scrollToCell(node: ActiveNode<T>) {\n    const row = Array.from(this.virtualizer.querySelectorAll(ApexGridRow.tagName)).find(\n      (row) => row.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.totalItems - 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.totalItems - 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  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/{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

package/controllers/resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../src/controllers/resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA2B,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,MAAM,OAAO,gBAAgB;IAC3B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAIhC,oBAAe,GAAG,KAAK,CAAC;QACxB,oBAAe,GAAG,CAAC,CAAC;QAJzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAKD,QAAQ,CAAC,GAAY,EAAE,WAAmB;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI;aACvB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,CAAE,CAAC;aAChE,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE3F,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;IAC/D,CAAC;IAOM,KAAK,CAAC,MAAyB;QACpC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAKM,IAAI;QACT,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,MAAM,CAAC,MAA8B,EAAE,KAAa,EAAE,WAAoB;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC;QACrC,CAAC;QAED,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,KAAK,CAAC,QAAQ,CAAC,MAA8B,EAAE,MAAyB;QAC7E,MAAM,CAAC,KAAK,GAAG,aAAa,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAE/B,MAAM,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;QACpE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,aAAa,KAAI,CAAC;IAKlB,eAAe;QACpB,OAAO,IAAI,CAAC,eAAe;YACzB,CAAC,CAAC,IAAI,CAAA;;kBAEM,QAAQ,CAAC;gBACf,SAAS,EAAE,cAAc,IAAI,CAAC,eAAe,KAAK;aACnD,CAAC;gBACI;YACV,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;CACF","sourcesContent":["import { html, nothing, type ReactiveController } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type ApexGridHeader from '../components/header.js';\nimport { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\n\nexport class ResizeController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public indicatorActive = false;\n  public indicatorOffset = 0;\n\n  #maxSize(key: Keys<T>, headerWidth: number) {\n    const max = this.host.rows\n      .map((row) => row.cells.find((cell) => cell.column.key === key)!)\n      .reduce((prev, current) => (current.offsetWidth > prev ? current.offsetWidth : prev), 0);\n\n    return Math.max(...[MIN_COL_RESIZE_WIDTH, max, headerWidth]);\n  }\n\n  /**\n   * Begins resizing a column by showing and positioning the resize indicator in relation to the column.\n   *\n   * @param header the\n   */\n  public start(header: ApexGridHeader<T>) {\n    this.indicatorActive = true;\n    this.indicatorOffset = header.offsetLeft + header.offsetWidth;\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Stops and resets the resizing state.\n   */\n  public stop() {\n    this.indicatorActive = false;\n    this.host.requestUpdate();\n  }\n\n  public resize(column: ColumnConfiguration<T>, width: number, sizerOffset?: number) {\n    if (sizerOffset) {\n      this.indicatorOffset = sizerOffset;\n    }\n\n    column.width = `${width}px`;\n    this.host.requestUpdate();\n  }\n\n  public async autosize(column: ColumnConfiguration<T>, header: ApexGridHeader<T>) {\n    column.width = 'max-content';\n\n    this.host.requestUpdate();\n    await this.host.updateComplete;\n\n    column.width = `${this.#maxSize(column.key, header.offsetWidth)}px`;\n    this.host.requestUpdate();\n  }\n\n  public hostConnected() {}\n\n  /**\n   * Renders the resize indicator in the grid.\n   */\n  public renderIndicator() {\n    return this.indicatorActive\n      ? html`<div\n          part=\"resize-indicator\"\n          style=${styleMap({\n            transform: `translateX(${this.indicatorOffset}px)`,\n          })}\n        ></div>`\n      : nothing;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
 import type { SortExpression, SortState } from '../operations/sort/types.js';
 export declare class SortController<T extends object> implements ReactiveController {
@@ -13,4 +13,3 @@ export declare class SortController<T extends object> implements ReactiveControl
     sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
     hostConnected(): void;
 }
-//# sourceMappingURL=sort.d.ts.map

package/controllers/sort.js

@@ -0,0 +1,94 @@
+import { PIPELINE } from '../internal/constants.js';
+import { asArray } from '../internal/utils.js';
+export class SortController {
+    constructor(host) {
+        this.host = host;
+        this.state = new Map();
+        this.host.addController(this);
+    }
+    get #isMultipleSort() {
+        return this.host.sortConfiguration.multiple;
+    }
+    get #isTriStateSort() {
+        return this.host.sortConfiguration.triState;
+    }
+    #resolveSortOptions(options) {
+        const expr = {
+            caseSensitive: false,
+            comparer: undefined,
+        };
+        if (!options || typeof options === 'boolean') {
+            return expr;
+        }
+        return Object.assign(expr, {
+            caseSensitive: options.caseSensitive,
+            comparer: options.comparer,
+        });
+    }
+    #createDefaultExpression(key) {
+        const options = this.host.getColumn(key)?.sort;
+        return {
+            key,
+            direction: 'ascending',
+            ...this.#resolveSortOptions(options),
+        };
+    }
+    #orderBy(dir) {
+        return this.#isTriStateSort
+            ? dir === 'ascending'
+                ? 'descending'
+                : dir === 'descending'
+                    ? 'none'
+                    : 'ascending'
+            : dir === 'ascending'
+                ? 'descending'
+                : 'ascending';
+    }
+    #emitSortingEvent(detail) {
+        return this.host.emitEvent('sorting', { detail, cancelable: true });
+    }
+    #emitSortedEvent(detail) {
+        return this.host.emitEvent('sorted', { detail });
+    }
+    #setExpression(expression) {
+        expression.direction === 'none'
+            ? this.reset(expression.key)
+            : this.state.set(expression.key, { ...expression });
+    }
+    async sortFromHeaderClick(column) {
+        const expression = this.prepareExpression(column);
+        if (!this.#emitSortingEvent(expression)) {
+            return;
+        }
+        if (!this.#isMultipleSort) {
+            this.reset();
+        }
+        this._sort(expression);
+        await this.host.updateComplete;
+        this.#emitSortedEvent(expression);
+    }
+    prepareExpression({ key, sort: options }) {
+        if (this.state.has(key)) {
+            const expr = this.state.get(key);
+            return Object.assign(expr, {
+                direction: this.#orderBy(expr.direction),
+                ...this.#resolveSortOptions(options),
+            });
+        }
+        return this.#createDefaultExpression(key);
+    }
+    reset(key) {
+        key ? this.state.delete(key) : this.state.clear();
+    }
+    _sort(expressions) {
+        for (const expr of asArray(expressions)) {
+            this.#setExpression(expr);
+        }
+        this.host.requestUpdate(PIPELINE);
+    }
+    sort(expressions) {
+        this._sort(asArray(expressions).map((expr) => Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)));
+    }
+    hostConnected() { }
+}
+//# sourceMappingURL=sort.js.map

package/controllers/sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../src/controllers/sort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type {\n  ColumnConfiguration,\n  ColumnSortConfiguration,\n  GridHost,\n  Keys,\n} from '../internal/types.js';\nimport { asArray } from '../internal/utils.js';\nimport type { SortExpression, SortingDirection, SortState } from '../operations/sort/types.js';\n\nexport class SortController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public state: SortState<T> = new Map();\n\n  get #isMultipleSort() {\n    return this.host.sortConfiguration.multiple;\n  }\n\n  get #isTriStateSort() {\n    return this.host.sortConfiguration.triState;\n  }\n\n  #resolveSortOptions(options?: boolean | ColumnSortConfiguration<T>) {\n    const expr: Pick<SortExpression<T>, 'caseSensitive' | 'comparer'> = {\n      caseSensitive: false,\n      comparer: undefined,\n    };\n\n    if (!options || typeof options === 'boolean') {\n      return expr as Partial<SortExpression<T>>;\n    }\n\n    return Object.assign(expr, {\n      caseSensitive: options.caseSensitive,\n      comparer: options.comparer,\n    }) as Partial<SortExpression<T>>;\n  }\n\n  #createDefaultExpression(key: Keys<T>) {\n    const options = this.host.getColumn(key)?.sort;\n\n    return {\n      key,\n      direction: 'ascending',\n      ...this.#resolveSortOptions(options),\n    } as SortExpression<T>;\n  }\n\n  #orderBy(dir?: SortingDirection): SortingDirection {\n    return this.#isTriStateSort\n      ? dir === 'ascending'\n        ? 'descending'\n        : dir === 'descending'\n          ? 'none'\n          : 'ascending'\n      : dir === 'ascending'\n        ? 'descending'\n        : 'ascending';\n  }\n\n  #emitSortingEvent(detail: SortExpression<T>) {\n    return this.host.emitEvent('sorting', { detail, cancelable: true });\n  }\n\n  #emitSortedEvent(detail: SortExpression<T>) {\n    return this.host.emitEvent('sorted', { detail });\n  }\n\n  #setExpression(expression: SortExpression<T>) {\n    expression.direction === 'none'\n      ? this.reset(expression.key)\n      : this.state.set(expression.key, { ...expression });\n  }\n\n  public async sortFromHeaderClick(column: ColumnConfiguration<T>) {\n    const expression = this.prepareExpression(column);\n\n    if (!this.#emitSortingEvent(expression)) {\n      return;\n    }\n\n    if (!this.#isMultipleSort) {\n      this.reset();\n    }\n\n    this._sort(expression);\n\n    await this.host.updateComplete;\n    this.#emitSortedEvent(expression);\n  }\n\n  public prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortExpression<T> {\n    if (this.state.has(key)) {\n      const expr = this.state.get(key)!;\n\n      return Object.assign(expr, {\n        direction: this.#orderBy(expr.direction),\n        ...this.#resolveSortOptions(options),\n      });\n    }\n\n    // Initial state\n    return this.#createDefaultExpression(key);\n  }\n\n  public reset(key?: Keys<T>) {\n    key ? this.state.delete(key) : this.state.clear();\n  }\n\n  protected _sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n    for (const expr of asArray(expressions)) {\n      this.#setExpression(expr);\n    }\n\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n    this._sort(\n      asArray(expressions).map((expr) =>\n        Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)\n      )\n    );\n  }\n\n  public hostConnected() {}\n}\n"]}

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

@@ -1,9 +1,9 @@
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
+import type { ActiveNode, GridHost } from '../internal/types.js';
 import { FilterController } from './filter.js';
 import { NavigationController } from './navigation.js';
-import { SortController } from './sort.js';
 import { ResizeController } from './resize.js';
-import type { ActiveNode, GridHost } from '../internal/types.js';
+import { SortController } from './sort.js';
 export declare class StateController<T extends object> implements ReactiveController {
     host: GridHost<T>;
     sorting: SortController<T>;
@@ -12,8 +12,8 @@ export declare class StateController<T extends object> implements ReactiveContro
     resizing: ResizeController<T>;
     get active(): ActiveNode<T>;
     set active(node: ActiveNode<T>);
-    get headerRow(): import("../components/header-row").default<T>;
-    get scrollContainer(): import("../components/virtualizer").default;
+    get headerRow(): import("../components/header-row.js").default<T>;
+    get scrollContainer(): import("../components/virtualizer.js").default;
     constructor(host: GridHost<T>);
     protected init(): void;
     hostConnected(): void;
@@ -22,4 +22,3 @@ export declare class StateController<T extends object> implements ReactiveContro
 export declare const gridStateContext: {
     __context__: StateController<any>;
 };
-//# sourceMappingURL=state.d.ts.map

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

@@ -1,8 +1,8 @@
-import { createContext } from '@lit-labs/context';
+import { createContext } from '@lit/context';
 import { FilterController } from './filter.js';
 import { NavigationController } from './navigation.js';
-import { SortController } from './sort.js';
 import { ResizeController } from './resize.js';
+import { SortController } from './sort.js';
 export class StateController {
     get active() {
         return this.navigation.active;
@@ -11,11 +11,9 @@ export class StateController {
         this.navigation.active = node;
     }
     get headerRow() {
-        // @ts-expect-error - Protected member access
         return this.host.headerRow;
     }
     get scrollContainer() {
-        // @ts-expect-error - Protected member access
         return this.host.scrollContainer;
     }
     constructor(host) {
@@ -31,9 +29,8 @@ export class StateController {
     }
     hostConnected() { }
     hostUpdate() {
-        var _a, _b;
-        (_a = this.headerRow) === null || _a === void 0 ? void 0 : _a.requestUpdate();
-        (_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.requestUpdate();
+        this.headerRow?.requestUpdate();
+        this.scrollContainer?.requestUpdate();
     }
 }
 export const gridStateContext = createContext('gridStateController');

package/controllers/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/controllers/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE3C,MAAM,OAAO,eAAe;IAM1B,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;IAChC,CAAC;IAED,IAAW,MAAM,CAAC,IAAmB;QACnC,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAW,SAAS;QAElB,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC7B,CAAC;IAED,IAAW,eAAe;QAExB,OAAO,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACnC,CAAC;IAED,YAAmB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAClC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAES,IAAI;QACZ,IAAI,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAEM,aAAa,KAAI,CAAC;IAElB,UAAU;QACf,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,CAAC;QAChC,IAAI,CAAC,eAAe,EAAE,aAAa,EAAE,CAAC;IACxC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAuB,qBAAqB,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\nimport type { ReactiveController } from 'lit';\nimport type { ActiveNode, GridHost } from '../internal/types.js';\nimport { FilterController } from './filter.js';\nimport { NavigationController } from './navigation.js';\nimport { ResizeController } from './resize.js';\nimport { SortController } from './sort.js';\n\nexport class StateController<T extends object> implements ReactiveController {\n  public sorting!: SortController<T>;\n  public filtering!: FilterController<T>;\n  public navigation!: NavigationController<T>;\n  public resizing!: ResizeController<T>;\n\n  public get active() {\n    return this.navigation.active;\n  }\n\n  public set active(node: ActiveNode<T>) {\n    this.navigation.active = node;\n  }\n\n  public get headerRow() {\n    // @ts-expect-error - Protected member access\n    return this.host.headerRow;\n  }\n\n  public get scrollContainer() {\n    // @ts-expect-error - Protected member access\n    return this.host.scrollContainer;\n  }\n\n  constructor(public host: GridHost<T>) {\n    this.host.addController(this);\n    this.init();\n  }\n\n  protected init() {\n    this.sorting = new SortController(this.host);\n    this.filtering = new FilterController(this.host);\n    this.navigation = new NavigationController(this.host);\n    this.resizing = new ResizeController(this.host);\n  }\n\n  public hostConnected() {}\n\n  public hostUpdate(): void {\n    this.headerRow?.requestUpdate();\n    this.scrollContainer?.requestUpdate();\n  }\n}\n\nexport const gridStateContext = createContext<StateController<any>>('gridStateController');\n"]}