igniteui-grid-lite 0.0.1 → 0.1.0

package/controllers/dom.js

@@ -1,54 +1,40 @@
-import { html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 import { registerGridIcons } from '../internal/icon-registry.js';
 import { applyColumnWidths } from '../internal/utils.js';
-export class GridDOMController {
+class GridDOMController {
     constructor(host, state) {
-        this.host = host;
-        this.state = state;
-        this.#initialSize = () => {
-            setTimeout(() => this.setScrollOffset());
-        };
         this.columnSizes = {};
-        this.rowRenderer = (data, index) => {
-            return html `
-      <igc-grid-lite-row
-        part="row"
-        style=${styleMap({ ...this.columnSizes, ...this.getActiveRowStyles(index) })}
-        .index=${index}
-        .activeNode=${this.state.active}
-        .data=${data}
-        .columns=${this.host.columns}
-      >
-      </igc-grid-lite-row>
-    `;
-        };
-        this.host.addController(this);
+        this._host = host;
+        this._state = state;
+        this._host.addController(this);
     }
-    #initialSize;
-    get container() {
-        return this.host.scrollContainer;
-    }
-    async hostConnected() {
+    hostConnected() {
         registerGridIcons();
         this.setGridColumnSizes();
-        await this.host.updateComplete;
-        this.container.addEventListener('visibilityChanged', this.#initialSize, { once: true });
+        this._host.updateComplete.then(() => {
+            this._state.virtualizer?.addEventListener('visibilityChanged', () => {
+                this.setScrollOffset();
+            }, { once: true });
+        });
     }
     hostUpdate() {
         this.setScrollOffset();
         this.setGridColumnSizes();
     }
     setScrollOffset() {
-        const size = this.container ? this.container.offsetWidth - this.container.clientWidth : 0;
-        this.host.style.setProperty('--scrollbar-offset', `${size}px`);
+        const size = this._state.virtualizer
+            ? this._state.virtualizer.offsetWidth - this._state.virtualizer.clientWidth
+            : 0;
+        this._host.style.setProperty('--scrollbar-offset', `${size}px`);
     }
     setGridColumnSizes() {
-        this.columnSizes = applyColumnWidths(this.host.columns);
+        this.columnSizes = applyColumnWidths(this._state.columns);
     }
     getActiveRowStyles(index) {
-        const { row } = this.state.active;
-        return row === index ? { 'z-index': '3' } : {};
+        return this._state.active.row === index ? { 'z-index': '3' } : {};
     }
 }
+function createDomController(host, state) {
+    return new GridDOMController(host, state);
+}
+export { createDomController };
 //# sourceMappingURL=dom.js.map

package/controllers/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/controllers/dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA2B,MAAM,KAAK,CAAC;AACpD,OAAO,EAAkB,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,OAAO,iBAAiB;IAC5B,YACY,IAAiB,EACjB,KAAyB;QADzB,SAAI,GAAJ,IAAI,CAAa;QACjB,UAAK,GAAL,KAAK,CAAoB;QAKrC,iBAAY,GAAG,GAAG,EAAE;YAClB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC;QAOK,gBAAW,GAAc,EAAE,CAAC;QAE5B,gBAAW,GAA0B,CAAC,IAAO,EAAE,KAAa,EAAE,EAAE;YACrE,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;iBACnE,KAAK;sBACA,IAAI,CAAC,KAAK,CAAC,MAAM;gBACvB,IAAI;mBACD,IAAI,CAAC,IAAI,CAAC,OAAO;;;KAG/B,CAAC;QACJ,CAAC,CAAC;QA1BA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,YAAY,CAEV;IAEF,IAAW,SAAS;QAElB,OAAO,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACnC,CAAC;IAkBM,KAAK,CAAC,aAAa;QACxB,iBAAiB,EAAE,CAAC;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAG1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,eAAe;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1F,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;IACjE,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC;IAEM,kBAAkB,CAAC,KAAa;QACrC,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAClC,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport { html, type ReactiveController } from 'lit';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { registerGridIcons } from '../internal/icon-registry.js';\nimport type { GridHost } from '../internal/types.js';\nimport { applyColumnWidths } from '../internal/utils.js';\nimport type { StateController } from './state.js';\n\nexport class GridDOMController<T extends object> implements ReactiveController {\n  constructor(\n    protected host: GridHost<T>,\n    protected state: StateController<T>\n  ) {\n    this.host.addController(this);\n  }\n\n  #initialSize = () => {\n    setTimeout(() => this.setScrollOffset());\n  };\n\n  public get container() {\n    // @ts-expect-error: protected member access\n    return this.host.scrollContainer;\n  }\n\n  public columnSizes: StyleInfo = {};\n\n  public rowRenderer: RenderItemFunction<T> = (data: T, index: number) => {\n    return html`\n      <igc-grid-lite-row\n        part=\"row\"\n        style=${styleMap({ ...this.columnSizes, ...this.getActiveRowStyles(index) })}\n        .index=${index}\n        .activeNode=${this.state.active}\n        .data=${data}\n        .columns=${this.host.columns}\n      >\n      </igc-grid-lite-row>\n    `;\n  };\n\n  public async hostConnected() {\n    registerGridIcons();\n    this.setGridColumnSizes();\n    // Wait for the initial paint of the virtualizer and recalculate the scrollbar offset\n    // for the next one\n    await this.host.updateComplete;\n    this.container.addEventListener('visibilityChanged', this.#initialSize, { once: true });\n  }\n\n  public hostUpdate(): void {\n    this.setScrollOffset();\n    this.setGridColumnSizes();\n  }\n\n  public setScrollOffset() {\n    const size = this.container ? this.container.offsetWidth - this.container.clientWidth : 0;\n    this.host.style.setProperty('--scrollbar-offset', `${size}px`);\n  }\n\n  protected setGridColumnSizes() {\n    this.columnSizes = applyColumnWidths(this.host.columns);\n  }\n\n  public getActiveRowStyles(index: number): StyleInfo {\n    const { row } = this.state.active;\n    return row === index ? { 'z-index': '3' } : {};\n  }\n}\n"]}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/controllers/dom.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,iBAAiB;IAIrB,YAAY,IAAiB,EAAE,KAAyB;QAMjD,gBAAW,GAAc,EAAE,CAAC;QALjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAIM,aAAa;QAClB,iBAAiB,EAAE,CAAC;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAClC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,CACvC,mBAAmB,EACnB,GAAG,EAAE;gBACH,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,eAAe;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW;YAClC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW;YAC3E,CAAC,CAAC,CAAC,CAAC;QACN,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;IAClE,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5D,CAAC;IAEM,kBAAkB,CAAC,KAAa;QACrC,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,CAAC;CACF;AAED,SAAS,mBAAmB,CAC1B,IAAiB,EACjB,KAAyB;IAEzB,OAAO,IAAI,iBAAiB,CAAI,IAAI,EAAE,KAAK,CAAC,CAAC;AAC/C,CAAC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type { StyleInfo } from 'lit/directives/style-map.js';\nimport { registerGridIcons } from '../internal/icon-registry.js';\nimport type { GridHost } from '../internal/types.js';\nimport { applyColumnWidths } from '../internal/utils.js';\nimport type { StateController } from './state.js';\n\nclass GridDOMController<T extends object> implements ReactiveController {\n  protected readonly _host: GridHost<T>;\n  protected readonly _state: StateController<T>;\n\n  constructor(host: GridHost<T>, state: StateController<T>) {\n    this._host = host;\n    this._state = state;\n    this._host.addController(this);\n  }\n\n  public columnSizes: StyleInfo = {};\n\n  public hostConnected(): void {\n    registerGridIcons();\n    this.setGridColumnSizes();\n\n    this._host.updateComplete.then(() => {\n      this._state.virtualizer?.addEventListener(\n        'visibilityChanged',\n        () => {\n          this.setScrollOffset();\n        },\n        { once: true }\n      );\n    });\n  }\n\n  public hostUpdate(): void {\n    this.setScrollOffset();\n    this.setGridColumnSizes();\n  }\n\n  public setScrollOffset(): void {\n    const size = this._state.virtualizer\n      ? this._state.virtualizer.offsetWidth - this._state.virtualizer.clientWidth\n      : 0;\n    this._host.style.setProperty('--scrollbar-offset', `${size}px`);\n  }\n\n  protected setGridColumnSizes(): void {\n    this.columnSizes = applyColumnWidths(this._state.columns);\n  }\n\n  public getActiveRowStyles(index: number): StyleInfo {\n    return this._state.active.row === index ? { 'z-index': '3' } : {};\n  }\n}\n\nfunction createDomController<T extends object>(\n  host: GridHost<T>,\n  state: StateController<T>\n): GridDOMController<T> {\n  return new GridDOMController<T>(host, state);\n}\n\nexport { createDomController };\nexport type { GridDOMController };\n"]}

package/controllers/filter.d.ts

@@ -1,13 +1,16 @@
 import type { ReactiveController } from 'lit';
-import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
+import type IgcFilterRow from '../components/filter-row.js';
+import type { ColumnConfiguration, Keys } from '../internal/types.js';
 import { FilterState } from '../operations/filter/state.js';
 import type { FilterExpression } from '../operations/filter/types.js';
+import type { StateController } from './state.js';
 export declare class FilterController<T extends object> implements ReactiveController {
     #private;
-    protected host: GridHost<T>;
-    constructor(host: GridHost<T>);
+    private readonly _stateController;
+    constructor(state: StateController<T>);
     state: FilterState<T>;
-    get filterRow(): import("../components/filter-row.js").default<T>;
+    get host(): import("../internal/types.js").GridHost<T>;
+    get filterRow(): IgcFilterRow<T> | null;
     hostConnected(): void;
     hostUpdate(): void;
     get(key: Keys<T>): import("../operations/filter/tree.js").FilterExpressionTree<T> | undefined;

package/controllers/filter.js

@@ -2,16 +2,19 @@ import { PIPELINE } from '../internal/constants.js';
 import { asArray, getFilterOperandsFor } from '../internal/utils.js';
 import { FilterState } from '../operations/filter/state.js';
 export class FilterController {
-    constructor(host) {
-        this.host = host;
+    constructor(state) {
         this.state = new FilterState();
-        this.host.addController(this);
+        this._stateController = state;
+        this._stateController.host.addController(this);
+    }
+    get host() {
+        return this._stateController.host;
     }
     get filterRow() {
-        return this.host.filterRow;
+        return this._stateController.filterRow;
     }
     get #virtualizer() {
-        return this.host.scrollContainer;
+        return this._stateController.virtualizer;
     }
     #emitFilteringEvent(expression, type) {
         return this.host.emitEvent('filtering', {

package/controllers/filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.js","sourceRoot":"","sources":["../../src/controllers/filter.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type { IgcFilteredEvent } from '../components/grid.js';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\nimport { asArray, getFilterOperandsFor } from '../internal/utils.js';\nimport { FilterState } from '../operations/filter/state.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\n\nexport class FilterController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public state: FilterState<T> = new FilterState();\n\n  public get filterRow() {\n    // @ts-expect-error - protected access\n    return this.host.filterRow;\n  }\n\n  get #virtualizer() {\n    // @ts-expect-error - protected access\n    return this.host.scrollContainer;\n  }\n\n  #emitFilteringEvent(expression: FilterExpression<T>, type: 'add' | 'modify' | 'remove') {\n    return this.host.emitEvent('filtering', {\n      detail: {\n        key: expression.key,\n        expressions: [expression],\n        type,\n      },\n      cancelable: true,\n    });\n  }\n\n  #emitFilteredEvent(detail?: IgcFilteredEvent<T>) {\n    return this.host.emitEvent('filtered', { detail });\n  }\n\n  #filter(expression: FilterExpression<T> | FilterExpression<T>[]) {\n    for (const expr of asArray(expression)) {\n      this.state.set(expr);\n    }\n\n    // HACK: In the case where the scrollTop is a large and amount and a big chunk of data is filtered out\n    // HACK: the virtualizer can't recalculate its scroll position correctly. Thus, we reset the scrollTop state.\n    this.#virtualizer?.scrollTo({ top: 0 });\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public hostConnected() {}\n\n  public hostUpdate(): void {\n    this.filterRow?.requestUpdate();\n  }\n\n  public get(key: Keys<T>) {\n    return this.state.get(key);\n  }\n\n  public reset(key?: Keys<T>) {\n    key ? this.state.delete(key) : this.state.clear();\n  }\n\n  public setActiveColumn(column?: ColumnConfiguration<T>) {\n    if (column?.filter && this.filterRow?.active) {\n      this.filterRow.column = column;\n      this.filterRow.expression = this.getDefaultExpression(column);\n      this.host.requestUpdate();\n    }\n  }\n\n  public getDefaultExpression(column: ColumnConfiguration<T>) {\n    const caseSensitive =\n      typeof column.filter === 'boolean' ? false : Boolean(column.filter?.caseSensitive);\n    const operands = getFilterOperandsFor(column);\n    const keys = Object.keys(operands) as Keys<typeof operands>[];\n\n    // XXX: Types\n    return {\n      key: column.key,\n      condition: operands[keys[0]],\n      caseSensitive,\n    } as unknown as FilterExpression<T>;\n  }\n\n  public async removeAllExpressions(key: Keys<T>) {\n    const state = this.get(key)?.all ?? [];\n\n    if (\n      !this.host.emitEvent('filtering', {\n        detail: {\n          key,\n          expressions: state,\n          type: 'remove',\n        },\n        cancelable: true,\n      })\n    ) {\n      return;\n    }\n\n    this.reset(key);\n    this.#filter([]);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key, state: this.get(key)?.all ?? [] });\n  }\n\n  public async removeExpression(expression: FilterExpression<T>) {\n    const state = this.get(expression.key);\n\n    if (!this.#emitFilteringEvent(expression, 'remove')) {\n      return;\n    }\n\n    state?.remove(expression);\n\n    if (state?.empty) {\n      this.reset(state.key);\n    }\n\n    this.#filter([]);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key: expression.key, state: state?.all ?? [] });\n  }\n\n  public async filterWithEvent(expression: FilterExpression<T>, type: 'add' | 'modify' | 'remove') {\n    if (!this.#emitFilteringEvent(expression, type)) {\n      return;\n    }\n\n    this.#filter(expression);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key: expression.key, state: this.get(expression.key)?.all ?? [] });\n  }\n\n  public filter(expression: FilterExpression<T> | FilterExpression<T>[]) {\n    this.#filter(\n      asArray(expression).map((expr) =>\n        Object.assign(this.getDefaultExpression(this.host.getColumn(expr.key)!), expr)\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"filter.js","sourceRoot":"","sources":["../../src/controllers/filter.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type IgcFilterRow from '../components/filter-row.js';\nimport type { IgcFilteredEvent } from '../components/grid.js';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { ColumnConfiguration, Keys } from '../internal/types.js';\nimport { asArray, getFilterOperandsFor } from '../internal/utils.js';\nimport { FilterState } from '../operations/filter/state.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\nimport type { StateController } from './state.js';\n\nexport class FilterController<T extends object> implements ReactiveController {\n  private readonly _stateController: StateController<T>;\n\n  constructor(state: StateController<T>) {\n    this._stateController = state;\n    this._stateController.host.addController(this);\n  }\n\n  public state: FilterState<T> = new FilterState();\n\n  public get host() {\n    return this._stateController.host;\n  }\n\n  public get filterRow(): IgcFilterRow<T> | null {\n    return this._stateController.filterRow;\n  }\n\n  get #virtualizer() {\n    return this._stateController.virtualizer;\n  }\n\n  #emitFilteringEvent(expression: FilterExpression<T>, type: 'add' | 'modify' | 'remove') {\n    return this.host.emitEvent('filtering', {\n      detail: {\n        key: expression.key,\n        expressions: [expression],\n        type,\n      },\n      cancelable: true,\n    });\n  }\n\n  #emitFilteredEvent(detail?: IgcFilteredEvent<T>) {\n    return this.host.emitEvent('filtered', { detail });\n  }\n\n  #filter(expression: FilterExpression<T> | FilterExpression<T>[]) {\n    for (const expr of asArray(expression)) {\n      this.state.set(expr);\n    }\n\n    // HACK: In the case where the scrollTop is a large and amount and a big chunk of data is filtered out\n    // HACK: the virtualizer can't recalculate its scroll position correctly. Thus, we reset the scrollTop state.\n    this.#virtualizer?.scrollTo({ top: 0 });\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public hostConnected() {}\n\n  public hostUpdate(): void {\n    this.filterRow?.requestUpdate();\n  }\n\n  public get(key: Keys<T>) {\n    return this.state.get(key);\n  }\n\n  public reset(key?: Keys<T>) {\n    key ? this.state.delete(key) : this.state.clear();\n  }\n\n  public setActiveColumn(column?: ColumnConfiguration<T>) {\n    if (column?.filter && this.filterRow?.active) {\n      this.filterRow.column = column;\n      this.filterRow.expression = this.getDefaultExpression(column);\n      this.host.requestUpdate();\n    }\n  }\n\n  public getDefaultExpression(column: ColumnConfiguration<T>) {\n    const caseSensitive =\n      typeof column.filter === 'boolean' ? false : Boolean(column.filter?.caseSensitive);\n    const operands = getFilterOperandsFor(column);\n    const keys = Object.keys(operands) as Keys<typeof operands>[];\n\n    // XXX: Types\n    return {\n      key: column.key,\n      condition: operands[keys[0]],\n      caseSensitive,\n    } as unknown as FilterExpression<T>;\n  }\n\n  public async removeAllExpressions(key: Keys<T>) {\n    const state = this.get(key)?.all ?? [];\n\n    if (\n      !this.host.emitEvent('filtering', {\n        detail: {\n          key,\n          expressions: state,\n          type: 'remove',\n        },\n        cancelable: true,\n      })\n    ) {\n      return;\n    }\n\n    this.reset(key);\n    this.#filter([]);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key, state: this.get(key)?.all ?? [] });\n  }\n\n  public async removeExpression(expression: FilterExpression<T>) {\n    const state = this.get(expression.key);\n\n    if (!this.#emitFilteringEvent(expression, 'remove')) {\n      return;\n    }\n\n    state?.remove(expression);\n\n    if (state?.empty) {\n      this.reset(state.key);\n    }\n\n    this.#filter([]);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key: expression.key, state: state?.all ?? [] });\n  }\n\n  public async filterWithEvent(expression: FilterExpression<T>, type: 'add' | 'modify' | 'remove') {\n    if (!this.#emitFilteringEvent(expression, type)) {\n      return;\n    }\n\n    this.#filter(expression);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key: expression.key, state: this.get(expression.key)?.all ?? [] });\n  }\n\n  public filter(expression: FilterExpression<T> | FilterExpression<T>[]) {\n    this.#filter(\n      asArray(expression).map((expr) =>\n        Object.assign(this.getDefaultExpression(this.host.getColumn(expr.key)!), expr)\n      )\n    );\n  }\n}\n"]}

package/controllers/navigation.d.ts

@@ -1,27 +1,27 @@
 import type { ReactiveController } from 'lit';
-import type { ActiveNode, GridHost, Keys } from '../internal/types.js';
+import type { ActiveNode, Keys } from '../internal/types.js';
+import type { StateController } from './state.js';
 export declare class NavigationController<T extends object> implements ReactiveController {
-    protected host: GridHost<T>;
+    protected _state: StateController<T>;
     protected handlers: Map<string, (() => void) | (() => void) | (() => void) | (() => void) | (() => void) | (() => void)>;
-    protected get virtualizer(): import("../components/virtualizer.js").default;
-    protected state: Map<import("../internal/types.js").NavigationState, ActiveNode<any>>;
+    protected get _virtualizer(): import("../components/virtualizer.js").default | null;
+    protected _navigationState: Map<import("../internal/types.js").NavigationState, ActiveNode<any>>;
     protected _active: Readonly<ActiveNode<any>>;
     protected get nextNode(): ActiveNode<T>;
-    protected get columns(): import("../index.js").ColumnConfiguration<T, keyof T>[];
-    protected get firstColumn(): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
+    protected get _columns(): import("../index.js").ColumnConfiguration<T, keyof T>[];
+    protected get _firstColumn(): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
     protected getPreviousColumn(key: Keys<T>): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
     protected getNextColumn(key: Keys<T>): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
     protected scrollToCell(node: ActiveNode<T>): void;
     get active(): ActiveNode<T>;
     set active(node: ActiveNode<T>);
-    constructor(host: GridHost<T>);
+    constructor(_state: StateController<T>);
     protected home(): void;
     protected end(): void;
     protected arrowDown(): void;
     protected arrowUp(): void;
     protected arrowLeft(): void;
     protected arrowRight(): void;
-    hostConnected(): void;
     hostDisconnected(): void;
     navigate(event: KeyboardEvent): void;
 }

package/controllers/navigation.js

@@ -1,29 +1,30 @@
-import IgcGridLiteRow from '../components/row.js';
 import { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';
+import { GRID_ROW_TAG } from '../internal/tags.js';
 export class NavigationController {
-    get virtualizer() {
-        return this.host.scrollContainer;
+    get _virtualizer() {
+        return this._state.virtualizer;
     }
     get nextNode() {
-        const node = this.state.get('current');
+        const node = this._navigationState.get('current');
         return node === SENTINEL_NODE
-            ? { column: this.firstColumn, row: 0 }
+            ? { column: this._firstColumn, row: 0 }
             : { ...node };
     }
-    get columns() {
-        return this.host.columns;
+    get _columns() {
+        return this._state.columns;
     }
-    get firstColumn() {
-        return this.host.getColumn(0).key ?? '';
+    get _firstColumn() {
+        return this._state.host.getColumn(0).key ?? '';
     }
     getPreviousColumn(key) {
-        return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)) - 1, 0)].key;
+        return this._columns[Math.max(this._columns.indexOf(this._state.host.getColumn(key)) - 1, 0)]
+            .key;
     }
     getNextColumn(key) {
-        return this.columns[Math.min(this.columns.indexOf(this.host.getColumn(key)) + 1, this.columns.length - 1)].key;
+        return this._columns[Math.min(this._columns.indexOf(this._state.host.getColumn(key)) + 1, this._columns.length - 1)].key;
     }
     scrollToCell(node) {
-        const row = Array.from(this.virtualizer.querySelectorAll(IgcGridLiteRow.tagName)).find((row) => row.index === node.row);
+        const row = Array.from(this._virtualizer?.querySelectorAll(GRID_ROW_TAG) ?? []).find((row) => row.index === node.row);
         if (row) {
             row.cells
                 .find((cell) => cell.column.key === node.column)
@@ -34,13 +35,13 @@ export class NavigationController {
         return this._active;
     }
     set active(node) {
-        this._active = node;
-        this.state.set('previous', this._active);
-        this.state.set('current', node);
-        this.host.requestUpdate();
+        this._active = node ?? SENTINEL_NODE;
+        this._navigationState.set('previous', this._active);
+        this._navigationState.set('current', node);
+        this._state.host.requestUpdate();
     }
-    constructor(host) {
-        this.host = host;
+    constructor(_state) {
+        this._state = _state;
         this.handlers = new Map(Object.entries({
             ArrowDown: this.arrowDown,
             ArrowUp: this.arrowUp,
@@ -49,29 +50,29 @@ export class NavigationController {
             Home: this.home,
             End: this.end,
         }));
-        this.state = NAVIGATION_STATE;
+        this._navigationState = NAVIGATION_STATE;
         this._active = SENTINEL_NODE;
-        this.host.addController(this);
+        this._state.host.addController(this);
     }
     home() {
         this.active = Object.assign(this.nextNode, { row: 0 });
-        this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
+        this._virtualizer?.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
     }
     end() {
-        this.active = Object.assign(this.nextNode, { row: this.host.totalItems - 1 });
-        this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
+        this.active = Object.assign(this.nextNode, { row: this._state.host.totalItems - 1 });
+        this._virtualizer?.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
     }
     arrowDown() {
         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._state.host.totalItems - 1),
         });
-        this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
+        this._virtualizer?.element(next.row)?.scrollIntoView({ block: 'nearest' });
     }
     arrowUp() {
         const next = this.nextNode;
         this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });
-        this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
+        this._virtualizer?.element(next.row)?.scrollIntoView({ block: 'nearest' });
     }
     arrowLeft() {
         const next = this.nextNode;
@@ -83,10 +84,9 @@ export class NavigationController {
         this.active = Object.assign(next, { column: this.getNextColumn(next.column) });
         this.scrollToCell(this.active);
     }
-    hostConnected() { }
     hostDisconnected() {
         this.active = SENTINEL_NODE;
-        this.state = NAVIGATION_STATE;
+        this._navigationState = NAVIGATION_STATE;
     }
     navigate(event) {
         if (this.handlers.has(event.key)) {

package/controllers/navigation.js.map

@@ -1 +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 IgcGridLiteRow 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(IgcGridLiteRow.tagName)).find(\n      (row) => row.index === node.row\n    ) as unknown as IgcGridLiteRow<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"]}
+{"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 IgcGridLiteRow from '../components/row.js';\nimport { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, Keys } from '../internal/types.js';\nimport type { StateController } from './state.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    return this._state.virtualizer;\n  }\n\n  protected _navigationState = NAVIGATION_STATE;\n  protected _active = SENTINEL_NODE;\n\n  protected get nextNode() {\n    const node = this._navigationState.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._state.columns;\n  }\n\n  protected get _firstColumn() {\n    return this._state.host.getColumn(0)!.key ?? '';\n  }\n\n  protected getPreviousColumn(key: Keys<T>) {\n    return this._columns[Math.max(this._columns.indexOf(this._state.host.getColumn(key)!) - 1, 0)]\n      .key;\n  }\n\n  protected getNextColumn(key: Keys<T>) {\n    return this._columns[\n      Math.min(\n        this._columns.indexOf(this._state.host.getColumn(key)!) + 1,\n        this._columns.length - 1\n      )\n    ].key;\n  }\n\n  protected scrollToCell(node: ActiveNode<T>) {\n    const row = Array.from(this._virtualizer?.querySelectorAll(GRID_ROW_TAG) ?? []).find(\n      (row) => row.index === node.row\n    ) as unknown as IgcGridLiteRow<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(): ActiveNode<T> {\n    return this._active as ActiveNode<T>;\n  }\n\n  public set active(node: ActiveNode<T>) {\n    this._active = node ?? SENTINEL_NODE;\n    this._navigationState.set('previous', this._active);\n    this._navigationState.set('current', node);\n    this._state.host.requestUpdate();\n  }\n\n  constructor(protected _state: StateController<T>) {\n    this._state.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._state.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._state.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 hostDisconnected() {\n    this.active = SENTINEL_NODE as ActiveNode<T>;\n    this._navigationState = 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/sort.d.ts

@@ -1,15 +1,15 @@
 import type { ReactiveController } from 'lit';
 import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
-import type { SortExpression, SortState } from '../operations/sort/types.js';
+import type { SortingExpression, SortState } from '../operations/sort/types.js';
 export declare class SortController<T extends object> implements ReactiveController {
     #private;
     protected host: GridHost<T>;
     constructor(host: GridHost<T>);
     state: SortState<T>;
     sortFromHeaderClick(column: ColumnConfiguration<T>): Promise<void>;
-    prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortExpression<T>;
+    prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortingExpression<T>;
     reset(key?: Keys<T>): void;
-    protected _sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
-    sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
+    protected _sort(expressions: SortingExpression<T> | SortingExpression<T>[]): void;
+    sort(expressions: SortingExpression<T> | SortingExpression<T>[]): void;
     hostConnected(): void;
 }

package/controllers/sort.js

@@ -7,10 +7,10 @@ export class SortController {
         this.host.addController(this);
     }
     get #isMultipleSort() {
-        return this.host.sortConfiguration.multiple;
+        return this.host.sortingOptions.mode === 'multiple';
     }
     get #isTriStateSort() {
-        return this.host.sortConfiguration.triState;
+        return true;
     }
     #resolveSortOptions(options) {
         const expr = {

package/controllers/sort.js.map

@@ -1 +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"]}
+{"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 { SortingDirection, SortingExpression, 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.sortingOptions.mode === 'multiple';\n  }\n\n  get #isTriStateSort() {\n    return true;\n  }\n\n  #resolveSortOptions(options?: boolean | ColumnSortConfiguration<T>) {\n    const expr: Pick<SortingExpression<T>, 'caseSensitive' | 'comparer'> = {\n      caseSensitive: false,\n      comparer: undefined,\n    };\n\n    if (!options || typeof options === 'boolean') {\n      return expr as Partial<SortingExpression<T>>;\n    }\n\n    return Object.assign(expr, {\n      caseSensitive: options.caseSensitive,\n      comparer: options.comparer,\n    }) as Partial<SortingExpression<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 SortingExpression<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: SortingExpression<T>) {\n    return this.host.emitEvent('sorting', { detail, cancelable: true });\n  }\n\n  #emitSortedEvent(detail: SortingExpression<T>) {\n    return this.host.emitEvent('sorted', { detail });\n  }\n\n  #setExpression(expression: SortingExpression<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>): SortingExpression<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: SortingExpression<T> | SortingExpression<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: SortingExpression<T> | SortingExpression<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/controllers/state.d.ts

@@ -1,24 +1,41 @@
 import type { ReactiveController } from 'lit';
-import type { ActiveNode, GridHost } from '../internal/types.js';
+import type IgcFilterRow from '../components/filter-row.js';
+import type IgcGridLiteHeaderRow from '../components/header-row.js';
+import type IgcGridLiteRow from '../components/row.js';
+import type IgcVirtualizer from '../components/virtualizer.js';
+import type { ActiveNode, ColumnConfiguration, GridHost } from '../internal/types.js';
 import { FilterController } from './filter.js';
 import { NavigationController } from './navigation.js';
 import { ResizeController } from './resize.js';
 import { SortController } from './sort.js';
-export declare class StateController<T extends object> implements ReactiveController {
-    host: GridHost<T>;
-    sorting: SortController<T>;
-    filtering: FilterController<T>;
-    navigation: NavigationController<T>;
-    resizing: ResizeController<T>;
+declare class StateController<T extends object> implements ReactiveController {
+    private _columns;
+    private readonly _observersCallback;
+    /** The grid host element. */
+    readonly host: GridHost<T>;
+    readonly sorting: SortController<T>;
+    readonly filtering: FilterController<T>;
+    readonly navigation: NavigationController<T>;
+    readonly resizing: ResizeController<T>;
+    get columns(): ColumnConfiguration<T>[];
+    /** Returns the header row element of the grid. */
+    get headerRow(): IgcGridLiteHeaderRow<T> | null;
+    /** Returns the filter row element of the grid. */
+    get filterRow(): IgcFilterRow<T> | null;
+    /** Returns the data row elements of the grid. */
+    get rows(): IgcGridLiteRow<T>[];
+    /** Returns the virtualizer element of the grid. */
+    get virtualizer(): IgcVirtualizer | null;
+    /** The currently active node in the grid. */
     get active(): ActiveNode<T>;
+    /** Sets the currently active node in the grid. */
     set active(node: ActiveNode<T>);
-    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;
+    constructor(host: GridHost<T>, observersCallback: () => void);
     hostUpdate(): void;
+    setColumnConfiguration(columns: ColumnConfiguration<T>[]): void;
+    setAutoColumnConfiguration(): void;
+    updateColumnsConfiguration(config: ColumnConfiguration<T>[]): void;
 }
-export declare const gridStateContext: {
-    __context__: StateController<any>;
-};
+declare function createStateController<T extends object>(host: GridHost<T>, observersCallback: () => void): StateController<T>;
+export { createStateController };
+export type { StateController };

package/controllers/state.js

@@ -1,37 +1,74 @@
-import { createContext } from '@lit/context';
+import { PIPELINE } from '../internal/constants.js';
+import { GRID_BODY, GRID_FILTER_ROW_TAG, GRID_HEADER_ROW_TAG, GRID_ROW_TAG, } from '../internal/tags.js';
+import { createColumnConfiguration, setColumnsFromData } from '../internal/utils.js';
 import { FilterController } from './filter.js';
 import { NavigationController } from './navigation.js';
 import { ResizeController } from './resize.js';
 import { SortController } from './sort.js';
-export class StateController {
+class StateController {
+    get columns() {
+        return this._columns;
+    }
+    get headerRow() {
+        return this.host.renderRoot.querySelector(GRID_HEADER_ROW_TAG);
+    }
+    get filterRow() {
+        return this.host.renderRoot.querySelector(GRID_FILTER_ROW_TAG);
+    }
+    get rows() {
+        return Array.from(this.host.renderRoot.querySelectorAll(GRID_ROW_TAG));
+    }
+    get virtualizer() {
+        return this.host.renderRoot.querySelector(GRID_BODY);
+    }
     get active() {
         return this.navigation.active;
     }
     set active(node) {
         this.navigation.active = node;
     }
-    get headerRow() {
-        return this.host.headerRow;
-    }
-    get scrollContainer() {
-        return this.host.scrollContainer;
-    }
-    constructor(host) {
+    constructor(host, observersCallback) {
+        this._columns = [];
+        this._observersCallback = observersCallback;
         this.host = host;
         this.host.addController(this);
-        this.init();
-    }
-    init() {
         this.sorting = new SortController(this.host);
-        this.filtering = new FilterController(this.host);
-        this.navigation = new NavigationController(this.host);
+        this.filtering = new FilterController(this);
+        this.navigation = new NavigationController(this);
         this.resizing = new ResizeController(this.host);
     }
-    hostConnected() { }
     hostUpdate() {
         this.headerRow?.requestUpdate();
-        this.scrollContainer?.requestUpdate();
+        this.virtualizer?.requestUpdate();
+    }
+    setColumnConfiguration(columns) {
+        this._columns = columns.map((column) => createColumnConfiguration(column));
+        this._observersCallback.call(this.host);
+        this.host.requestUpdate(PIPELINE);
     }
+    setAutoColumnConfiguration() {
+        if (this.host.autoGenerate && this.host.data.length > 0) {
+            this._columns = setColumnsFromData(this.host.data[0]);
+            this.host.requestUpdate(PIPELINE);
+        }
+    }
+    updateColumnsConfiguration(config) {
+        for (const columnConfig of config) {
+            const existing = this._columns.findIndex((column) => column.key === columnConfig.key);
+            if (existing !== -1) {
+                this._columns[existing] = {
+                    ...this._columns[existing],
+                    ...createColumnConfiguration(columnConfig),
+                };
+            }
+        }
+        this._columns = [...this._columns];
+        this._observersCallback.call(this.host);
+        this.host.requestUpdate(PIPELINE);
+    }
+}
+function createStateController(host, observersCallback) {
+    return new StateController(host, observersCallback);
 }
-export const gridStateContext = createContext('gridStateController');
+export { createStateController };
 //# sourceMappingURL=state.js.map