igniteui-grid-lite 0.9.0 → 0.10.0

package/components/grid.d.ts

@@ -1,7 +1,8 @@
 import { ContextProvider } from '@lit/context';
 import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';
+import { type PropertyValues } from 'lit';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
-import type { ColumnConfiguration, DataPipelineConfiguration, GridLiteSortingOptions, Keys } from '../internal/types.js';
+import type { ColumnConfiguration, DataPipelineConfiguration, GridLiteSortingOptions, Keys, NavigateToOptions } from '../internal/types.js';
 import type { FilterExpression } from '../operations/filter/types.js';
 import type { SortingExpression } from '../operations/sort/types.js';
 import IgcGridLiteRow from './row.js';
@@ -99,8 +100,9 @@ export declare class IgcGridLite<T extends object = any> extends EventEmitterBas
     static get tagName(): "igc-grid-lite";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    protected readonly _stateController: import("../controllers/state.js").StateController<T>;
+    private readonly _a11y;
     protected readonly _domController: import("../controllers/dom.js").GridDOMController<T>;
+    protected readonly _stateController: import("../controllers/state.js").StateController<T>;
     protected readonly _dataController: import("../controllers/data-operation.js").DataOperationsController<T>;
     protected readonly _stateProvider: ContextProvider<{
         __context__: import("../controllers/state.js").StateController<any>;
@@ -111,6 +113,17 @@ export declare class IgcGridLite<T extends object = any> extends EventEmitterBas
     private _updateObservers;
     private _updateConfiguration;
     protected _dataState: T[];
+    /** Monotonic token identifying the most recently started pipeline run. */
+    private _pipelineEpoch;
+    private _pipelineTask;
+    /**
+     * Resolves when the latest pipeline run completes and its result is rendered.
+     * The sort and filter controllers await this so that `sorted` and `filtered`
+     * report an up-to-date {@link IgcGridLite.dataView}.
+     *
+     * @internal
+     */
+    get _pipelineComplete(): Promise<void>;
     adoptRootStyles: boolean;
     /** The data source for the grid. */
     data: T[];
@@ -161,6 +174,17 @@ export declare class IgcGridLite<T extends object = any> extends EventEmitterBas
      * Get the filter state for the grid.
      */
     get filterExpressions(): FilterExpression<T>[];
+    /**
+     * Sets the column configuration for the grid.
+     *
+     * @remarks
+     * Passing an empty collection resets the columns, which - with `autoGenerate` -
+     * lets the next data source binding re-generate them.
+     */
+    set columns(configuration: ColumnConfiguration<T>[]);
+    /**
+     * Returns the column configuration of the grid.
+     */
     get columns(): ColumnConfiguration<T>[];
     /**
      * Returns the collection of rendered row elements in the grid.
@@ -179,11 +203,24 @@ export declare class IgcGridLite<T extends object = any> extends EventEmitterBas
      * The total number of items in the {@link IgcGridLite.dataView} collection.
      */
     get totalItems(): number;
+    protected sortingOptionsChanged(): void;
     protected dataChanged(): void;
-    protected pipeline(): Promise<void>;
+    /**
+     * NOTE: The `PIPELINE` sentinel equals this method's name. That equality makes
+     * the `@watch` comparison (`undefined !== <method>`) fire on each requested
+     * update. A rename of this method silently disables the pipeline.
+     */
+    protected pipeline(): void;
+    /** Runs the data operations. Discards a result that a newer run supersedes. */
+    private _runPipeline;
     constructor();
+    /** The column set the current row renderer was built from. */
+    private _rowColumns?;
+    protected willUpdate(props: PropertyValues<this>): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected firstUpdated(): void;
+    /** The column elements assigned to the slot, either direct or nested in a container. */
+    private _assignedColumns;
     private _hasAssignedColumns;
     private _handleSlotChange;
     /**
@@ -202,11 +239,18 @@ export declare class IgcGridLite<T extends object = any> extends EventEmitterBas
      * Resets the current filter state of the control.
      */
     clearFilter(key?: Keys<T>): void;
+    /**
+     * Navigates to a position in the grid based on provided row index and column field.
+     * @param row The row index to navigate to
+     * @param options The column field to navigate to and whether to activate the cell
+     */
+    navigateTo(row: number, options?: NavigateToOptions<T>): Promise<void>;
     /**
      * Navigates to a position in the grid based on provided row index and column field.
      * @param row The row index to navigate to
      * @param column The column field to navigate to, if any
      * @param activate Optionally also activate the navigated cell
+     * @deprecated Use `navigateTo(row, options)` instead.
      */
     navigateTo(row: number, column?: Keys<T>, activate?: boolean): Promise<void>;
     /**
@@ -215,7 +259,9 @@ export declare class IgcGridLite<T extends object = any> extends EventEmitterBas
     getColumn(id: Keys<T> | number): ColumnConfiguration<T> | undefined;
     protected _bodyClickHandler(event: PointerEvent): void;
     protected _bodyKeydownHandler(event: KeyboardEvent): void;
+    /** Rebuilt by {@link IgcGridLite.willUpdate} when a row input changes. */
     protected _renderRow: RenderItemFunction<T>;
+    private _createRowRenderer;
     protected _renderHeaderRow(): import("lit-html").TemplateResult<1>;
     protected _renderBody(): import("lit-html").TemplateResult<1>;
     protected _renderFilterRow(): import("lit-html").TemplateResult<1>;

package/components/grid.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ContextProvider } from '@lit/context';
-import { θaddThemingController as addThemingController, IgcButtonComponent, IgcChipComponent, IgcDropdownComponent, IgcInputComponent, } from 'igniteui-webcomponents';
+import { θaddThemingController as addThemingController } from 'igniteui-webcomponents';
 import { html, nothing } from 'lit';
 import { eventOptions, property, state } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
@@ -13,13 +13,14 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { createDataOperationsController } from '../controllers/data-operation.js';
 import { createDomController } from '../controllers/dom.js';
 import { createStateController } from '../controllers/state.js';
-import { PIPELINE } from '../internal/constants.js';
+import { addA11y, headerRowsFor } from '../internal/a11y.js';
+import { FOCUS_WITHIN, PIPELINE } from '../internal/constants.js';
 import { COLUMN_UPDATE_CONTEXT, GRID_STATE_CONTEXT } from '../internal/context.js';
 import { getElementFromEventPath } from '../internal/element-from-event-path.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_TAG } from '../internal/tags.js';
-import { asArray, getFilterOperandsFor, isNumber, isString } from '../internal/utils.js';
+import { asArray, isNumber, isString, resolveCondition } from '../internal/utils.js';
 import { watch } from '../internal/watch.js';
 import { styles as base } from '../styles/themes/grid.base.css.js';
 import { all } from '../styles/themes/grid-themes.js';
@@ -30,20 +31,13 @@ import IgcFilterRow from './filter-row.js';
 import IgcGridLiteHeaderRow from './header-row.js';
 import IgcGridLiteRow from './row.js';
 import IgcVirtualizer from './virtualizer.js';
-function columnReducer(acc, el) {
-    const tag = IgcGridLiteColumn.tagName;
-    const column = el.matches(tag) ? el : el.querySelector(tag);
-    if (column)
-        acc.push(column);
-    return acc;
-}
 export class IgcGridLite extends EventEmitterBase {
     static get tagName() {
         return GRID_TAG;
     }
     static { this.styles = [base, shared]; }
     static register() {
-        registerComponent(IgcGridLite, IgcGridLiteColumn, IgcVirtualizer, IgcGridLiteRow, IgcGridLiteHeaderRow, IgcFilterRow, IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent);
+        registerComponent(IgcGridLite, IgcGridLiteColumn, IgcVirtualizer, IgcGridLiteRow, IgcGridLiteHeaderRow);
     }
     _updateObservers() {
         this._stateProvider.updateObservers();
@@ -51,6 +45,9 @@ export class IgcGridLite extends EventEmitterBase {
     _updateConfiguration(config) {
         this._stateController.updateColumnsConfiguration(asArray(config));
     }
+    get _pipelineComplete() {
+        return this.updateComplete.then(() => this._pipelineTask);
+    }
     set sortingExpressions(expressions) {
         this._stateController.sorting.reset();
         if (this.hasUpdated) {
@@ -63,7 +60,7 @@ export class IgcGridLite extends EventEmitterBase {
         }
     }
     get sortingExpressions() {
-        return Array.from(this._stateController.sorting.state.values());
+        return Array.from(this._stateController.sorting.state.values(), (expr) => ({ ...expr }));
     }
     set filterExpressions(expressions) {
         this._stateController.filtering.reset();
@@ -75,13 +72,16 @@ export class IgcGridLite extends EventEmitterBase {
         }
     }
     get filterExpressions() {
-        return this._stateController.filtering.state.values.flatMap((each) => each.all);
+        return this._stateController.filtering.state.values.flatMap((each) => each.all.map((expr) => ({ ...expr })));
+    }
+    set columns(configuration) {
+        this._stateController.setColumnConfiguration(asArray(configuration));
     }
     get columns() {
         return this._stateController.columns.map((col) => ({ ...col }));
     }
     get rows() {
-        return this._stateController.rows;
+        return this._domController.rows;
     }
     get dataView() {
         return this._dataState;
@@ -89,6 +89,9 @@ export class IgcGridLite extends EventEmitterBase {
     get totalItems() {
         return this._dataState.length;
     }
+    sortingOptionsChanged() {
+        this._updateObservers();
+    }
     dataChanged() {
         this._dataState = [...this.data];
         if (this.hasUpdated) {
@@ -98,13 +101,28 @@ export class IgcGridLite extends EventEmitterBase {
             this.pipeline();
         }
     }
-    async pipeline() {
-        this._dataState = await this._dataController.apply([...this.data], this._stateController);
+    pipeline() {
+        this._pipelineTask = this._runPipeline();
+    }
+    async _runPipeline() {
+        const epoch = ++this._pipelineEpoch;
+        try {
+            const state = await this._dataController.apply([...this.data], this._stateController);
+            if (epoch !== this._pipelineEpoch) {
+                return;
+            }
+            this._dataState = state;
+        }
+        catch (e) {
+            console.error(e);
+        }
+        await this.updateComplete;
     }
     constructor() {
         super();
-        this._stateController = createStateController(this, this._updateObservers);
-        this._domController = createDomController(this, this._stateController);
+        this._a11y = addA11y(this, 'grid');
+        this._domController = createDomController(this);
+        this._stateController = createStateController(this, this._domController, this._updateObservers);
         this._dataController = createDataOperationsController(this);
         this._stateProvider = new ContextProvider(this, {
             context: GRID_STATE_CONTEXT,
@@ -117,33 +135,29 @@ export class IgcGridLite extends EventEmitterBase {
             }),
         });
         this._dataState = [];
+        this._pipelineEpoch = 0;
+        this._pipelineTask = Promise.resolve();
         this.adoptRootStyles = false;
         this.data = [];
         this.autoGenerate = false;
         this.sortingOptions = {
             mode: 'multiple',
         };
-        this._renderRow = (item, index) => {
-            const styles = {
-                ...this._domController.columnSizes,
-                ...this._domController.getActiveRowStyles(index),
-            };
-            const activeNode = this._stateController.active;
-            return html `
-      <igc-grid-lite-row
-        part="row"
-        exportparts="cell"
-        style=${styleMap(styles)}
-        .adoptRootStyles=${this.adoptRootStyles}
-        .index=${index}
-        .activeNode=${activeNode}
-        .data=${item}
-        .columns=${this._stateController.columns}
-      ></igc-grid-lite-row>
-    `;
-        };
+        this._renderRow = () => html ``;
         addThemingController(this, all);
     }
+    willUpdate(props) {
+        const { columns } = this._stateController;
+        this._domController.setColumns(columns);
+        this._a11y.set({
+            ariaRowCount: `${headerRowsFor(columns) + this._dataState.length}`,
+            ariaColCount: `${columns.filter((column) => !column.hidden).length}`,
+        });
+        if (columns !== this._rowColumns || props.has('adoptRootStyles')) {
+            this._rowColumns = columns;
+            this._renderRow = this._createRowRenderer(columns);
+        }
+    }
     createRenderRoot() {
         const root = super.createRenderRoot();
         root.addEventListener('slotchange', this._handleSlotChange.bind(this));
@@ -156,30 +170,27 @@ export class IgcGridLite extends EventEmitterBase {
             }
         });
     }
-    _hasAssignedColumns() {
+    _assignedColumns() {
         const slot = this.renderRoot.querySelector('slot');
-        const assignedNodes = slot
+        const tag = IgcGridLiteColumn.tagName;
+        return slot
             .assignedElements({ flatten: true })
-            .reduce(columnReducer, []);
-        return assignedNodes.length > 0;
+            .flatMap((el) => (el.matches(tag) ? el : Array.from(el.querySelectorAll(tag))));
     }
-    _handleSlotChange(event) {
-        const slot = event.target;
-        const assignedNodes = slot
-            .assignedElements({ flatten: true })
-            .reduce(columnReducer, []);
-        this._stateController.setColumnConfiguration(assignedNodes);
+    _hasAssignedColumns() {
+        return this._assignedColumns().length > 0;
+    }
+    _handleSlotChange() {
+        this._stateController.setColumnConfiguration(this._assignedColumns());
     }
     filter(config) {
-        const expressions = asArray(config).filter((expr) => {
-            const column = this.getColumn(expr.key);
-            return column !== undefined;
-        });
+        const expressions = asArray(config)
+            .filter((expr) => this.getColumn(expr.key) !== undefined)
+            .map((expr) => ({ ...expr }));
         for (const expr of expressions) {
-            if (!isString(expr.condition)) {
-                continue;
+            if (isString(expr.condition)) {
+                expr.condition = resolveCondition(this.getColumn(expr.key), expr.condition);
             }
-            expr.condition = getFilterOperandsFor(this.getColumn(expr.key))[expr.condition];
         }
         this._stateController.filtering.filter(expressions);
     }
@@ -194,23 +205,43 @@ export class IgcGridLite extends EventEmitterBase {
         this._stateController.filtering.reset(key);
         this.requestUpdate(PIPELINE);
     }
-    async navigateTo(row, column, activate = false) {
-        await this._stateController.navigation.navigateTo(row, column, activate);
+    async navigateTo(row, columnOrOptions, activate) {
+        const options = typeof columnOrOptions === 'object' ? columnOrOptions : { column: columnOrOptions, activate };
+        await this._stateController.navigation.navigateTo(row, options);
     }
     getColumn(id) {
-        return this._stateController.columns.find((column, index) => isNumber(id) ? index === id : column.field === id);
+        const columns = this._stateController.columns;
+        return isNumber(id) ? columns[id] : columns.find((column) => column.field === id);
     }
     _bodyClickHandler(event) {
         const target = getElementFromEventPath(IgcGridLiteCell.tagName, event);
         if (target) {
             this._stateController.active = { column: target.column.field, row: target.row.index };
+            if (!target.matches(FOCUS_WITHIN)) {
+                target.focus({ preventScroll: true });
+            }
         }
     }
     _bodyKeydownHandler(event) {
-        if (event.target === this._stateController.virtualizer) {
+        const [origin] = event.composedPath();
+        if (origin === this._domController.virtualizer || origin instanceof IgcGridLiteCell) {
             this._stateController.navigation.navigate(event);
         }
     }
+    _createRowRenderer(columns) {
+        return (item, index) => html `
+      <igc-grid-lite-row
+        part="row"
+        exportparts="cell"
+        style=${styleMap(this._domController.columnSizes)}
+        .adoptRootStyles=${this.adoptRootStyles}
+        .index=${index}
+        .activeNode=${this._stateController.active}
+        .data=${item}
+        .columns=${columns}
+      ></igc-grid-lite-row>
+    `;
+    }
     _renderHeaderRow() {
         return html `
       <igc-grid-lite-header-row
@@ -223,18 +254,24 @@ export class IgcGridLite extends EventEmitterBase {
     }
     _renderBody() {
         return html `
-      <igc-virtualizer
+      <igc-grid-lite-virtualizer
         tabindex="0"
         .items=${this._dataState}
         .renderItem=${this._renderRow}
         @click=${this._bodyClickHandler}
         @keydown=${this._bodyKeydownHandler}
-      ></igc-virtualizer>
+      ></igc-grid-lite-virtualizer>
     `;
     }
     _renderFilterRow() {
-        return html `${cache(this._stateController.columns.some((column) => column.filterable)
-            ? html `<igc-filter-row style=${styleMap(this._domController.columnSizes)}></igc-filter-row>`
+        const filterable = this._stateController.columns.some((column) => column.filterable);
+        if (filterable) {
+            IgcFilterRow.register();
+        }
+        return html `${cache(filterable
+            ? html `<igc-grid-lite-filter-row
+            style=${styleMap(this._domController.columnSizes)}
+          ></igc-grid-lite-filter-row>`
             : nothing)}`;
     }
     render() {
@@ -269,6 +306,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], IgcGridLite.prototype, "filterExpressions", null);
+__decorate([
+    watch('sortingOptions', { waitUntilFirstUpdate: true })
+], IgcGridLite.prototype, "sortingOptionsChanged", null);
 __decorate([
     watch('data')
 ], IgcGridLite.prototype, "dataChanged", null);

package/components/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/components/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport {\n  θaddThemingController as addThemingController,\n  IgcButtonComponent,\n  IgcChipComponent,\n  IgcDropdownComponent,\n  IgcInputComponent,\n} from 'igniteui-webcomponents';\nimport { html, nothing } from 'lit';\nimport { eventOptions, property, state } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { createDataOperationsController } from '../controllers/data-operation.js';\nimport { createDomController } from '../controllers/dom.js';\nimport { createStateController } from '../controllers/state.js';\nimport { PIPELINE } from '../internal/constants.js';\nimport { COLUMN_UPDATE_CONTEXT, GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { getElementFromEventPath } from '../internal/element-from-event-path.js';\nimport { EventEmitterBase } from '../internal/mixins/event-emitter.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_TAG } from '../internal/tags.js';\nimport type {\n  ColumnConfiguration,\n  DataPipelineConfiguration,\n  GridLiteSortingOptions,\n  Keys,\n} from '../internal/types.js';\nimport { asArray, getFilterOperandsFor, isNumber, isString } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\nimport type { SortingExpression } from '../operations/sort/types.js';\nimport { styles as base } from '../styles/themes/grid.base.css.js';\nimport { all } from '../styles/themes/grid-themes.js';\nimport { styles as shared } from '../styles/themes/shared/grid.common.css.js';\nimport IgcGridLiteCell from './cell.js';\nimport { IgcGridLiteColumn } from './column.js';\nimport IgcFilterRow from './filter-row.js';\nimport IgcGridLiteHeaderRow from './header-row.js';\nimport IgcGridLiteRow from './row.js';\nimport IgcVirtualizer from './virtualizer.js';\n\n/** Column reducer matching either direct column element or one nested in container */\nfunction columnReducer<T extends Element>(acc: T[], el: T): T[] {\n  const tag = IgcGridLiteColumn.tagName;\n  const column = el.matches(tag) ? el : el.querySelector(tag);\n  if (column) acc.push(column as unknown as T);\n  return acc;\n}\n\n/**\n * Event object for the filtering event of the grid.\n */\nexport interface IgcFilteringEvent<T extends object = any> {\n  /**\n   * The target column for the filter operation.\n   */\n  key: Keys<T>;\n\n  /**\n   * The filter expression(s) to apply.\n   */\n  expressions: FilterExpression<T>[];\n\n  /**\n   * The type of modification which will be applied to the filter\n   * state of the column.\n   *\n   * @remarks\n   * `add` - a new filter expression will be added to the state of the column.\n   * `modify` - an existing filter expression will be modified.\n   * `remove` - the expression(s) will be removed from the state of the column.\n   */\n  type: 'add' | 'modify' | 'remove';\n}\n\n/**\n * Event object for the filtered event of the grid.\n */\nexport interface IgcFilteredEvent<T extends object = any> {\n  /**\n   * The target column for the filter operation.\n   */\n  key: Keys<T>;\n\n  /**\n   * The filter state of the column after the operation.\n   */\n  state: FilterExpression<T>[];\n}\n\n/**\n * Events for the igc-grid-lite.\n */\nexport interface IgcGridLiteEventMap<T extends object = any> {\n  /**\n   * Emitted when sorting is initiated through the UI.\n   * Returns the sort expression which will be used for the operation.\n   *\n   * @remarks\n   * The event is cancellable which prevents the operation from being applied.\n   * The expression can be modified prior to the operation running.\n   *\n   * @event\n   */\n  sorting: CustomEvent<SortingExpression<T, any>>;\n  /**\n   * Emitted when a sort operation initiated through the UI has completed.\n   * Returns the sort expression used for the operation.\n   *\n   * @event\n   */\n  sorted: CustomEvent<SortingExpression<T, any>>;\n  /**\n   * Emitted when filtering is initiated through the UI.\n   *\n   * @remarks\n   * The event is cancellable which prevents the operation from being applied.\n   * The expression can be modified prior to the operation running.\n   *\n   * @event\n   */\n  filtering: CustomEvent<IgcFilteringEvent<T>>;\n  /**\n   * Emitted when a filter operation initiated through the UI has completed.\n   * Returns the filter state for the affected column.\n   *\n   * @event\n   */\n  filtered: CustomEvent<IgcFilteredEvent<T>>;\n}\n\n/**\n * IgcGridLite is a web component for displaying data in a tabular format quick and easy.\n *\n * Out of the box it provides row virtualization, sort and filter operations (client and server side),\n * the ability to template cells and headers and column hiding.\n *\n * @element igc-grid-lite\n *\n * @fires sorting - Emitted when sorting is initiated through the UI.\n * @fires sorted - Emitted when a sort operation initiated through the UI has completed.\n * @fires filtering - Emitted when filtering is initiated through the UI.\n * @fires filtered - Emitted when a filter operation initiated through the UI has completed.\n *\n */\nexport class IgcGridLite<T extends object = any> extends EventEmitterBase<IgcGridLiteEventMap<T>> {\n  public static get tagName() {\n    return GRID_TAG;\n  }\n\n  public static override styles = [base, shared];\n\n  public static register(): void {\n    registerComponent(\n      IgcGridLite,\n      IgcGridLiteColumn,\n      IgcVirtualizer,\n      IgcGridLiteRow,\n      IgcGridLiteHeaderRow,\n      IgcFilterRow,\n      IgcButtonComponent,\n      IgcChipComponent,\n      IgcInputComponent,\n      IgcDropdownComponent\n    );\n  }\n\n  protected readonly _stateController = createStateController(this, this._updateObservers);\n  protected readonly _domController = createDomController(this, this._stateController);\n  protected readonly _dataController = createDataOperationsController(this);\n\n  protected readonly _stateProvider = new ContextProvider(this, {\n    context: GRID_STATE_CONTEXT,\n    initialValue: this._stateController,\n  });\n\n  protected readonly _columnUpdateProvider = new ContextProvider(this, {\n    context: COLUMN_UPDATE_CONTEXT,\n    initialValue: ((config: ColumnConfiguration<T>) => {\n      this._updateConfiguration(config);\n    }) as any,\n  });\n\n  private _updateObservers(): void {\n    this._stateProvider.updateObservers();\n  }\n\n  private _updateConfiguration(config: ColumnConfiguration<T>): void {\n    this._stateController.updateColumnsConfiguration(asArray(config));\n  }\n\n  @state()\n  protected _dataState: T[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: 'adopt-root-styles' })\n  public adoptRootStyles = false;\n\n  /** The data source for the grid. */\n  @property({ attribute: false })\n  public data: T[] = [];\n\n  /**\n   * Whether the grid will try to \"resolve\" its column configuration based on the passed\n   * data source.\n   *\n   * @remarks\n   * This is usually executed on initial rendering in the DOM. It depends on having an existing data source\n   * to infer the column configuration for the grid.\n   * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually\n   * result in empty column configuration for the grid.\n   *\n   * This property is ignored if any existing column configuration already exists in the grid.\n   *\n   * In a scenario where you want to bind a new data source and still keep the auto-generation behavior,\n   * make sure to reset the column collection of the grid before passing in the new data source.\n   *\n   * @example\n   * ```typescript\n   * // assuming autoGenerate is set to true\n   * grid.columns = [];\n   * grid.data = [...];\n   * ```\n   *\n   * @attr auto-generate\n   */\n  @property({ type: Boolean, attribute: 'auto-generate' })\n  public autoGenerate = false;\n\n  /** Sort configuration property for the grid. */\n  @property({ attribute: false })\n  public sortingOptions: GridLiteSortingOptions = {\n    mode: 'multiple',\n  };\n\n  /**\n   * Configuration object which controls remote data operations for the grid.\n   */\n  @property({ attribute: false })\n  public dataPipelineConfiguration!: DataPipelineConfiguration<T>;\n\n  /**\n   * Set the sort state for the grid.\n   */\n  public set sortingExpressions(expressions: SortingExpression<T>[]) {\n    this._stateController.sorting.reset();\n    if (this.hasUpdated) {\n      this.sort(expressions);\n    } else {\n      for (const expr of expressions) {\n        this._stateController.sorting.state.set(expr.key, { ...expr });\n      }\n    }\n  }\n\n  /**\n   * Get the sort state for the grid.\n   */\n  @property({ attribute: false })\n  public get sortingExpressions(): SortingExpression<T>[] {\n    return Array.from(this._stateController.sorting.state.values());\n  }\n\n  /**\n   * Set the filter state for the grid.\n   */\n  public set filterExpressions(expressions: FilterExpression<T>[]) {\n    this._stateController.filtering.reset();\n    if (this.hasUpdated) {\n      this.filter(expressions);\n    } else {\n      this._stateController.filtering.setRaw(expressions);\n    }\n  }\n\n  /**\n   * Get the filter state for the grid.\n   */\n  @property({ attribute: false })\n  public get filterExpressions(): FilterExpression<T>[] {\n    return this._stateController.filtering.state.values.flatMap((each) => each.all);\n  }\n\n  public get columns(): ColumnConfiguration<T>[] {\n    return this._stateController.columns.map((col) => ({ ...col }));\n  }\n\n  /**\n   * Returns the collection of rendered row elements in the grid.\n   *\n   * @remarks\n   * Since the grid has virtualization, this property returns only the currently rendered\n   * chunk of elements in the DOM.\n   */\n  public get rows() {\n    return this._stateController.rows;\n  }\n\n  /**\n   * Returns the state of the data source after sort/filter operations\n   * have been applied.\n   */\n  public get dataView(): ReadonlyArray<T> {\n    return this._dataState;\n  }\n\n  /**\n   * The total number of items in the {@link IgcGridLite.dataView} collection.\n   */\n  public get totalItems(): number {\n    return this._dataState.length;\n  }\n\n  @watch('data')\n  protected dataChanged() {\n    this._dataState = [...this.data];\n\n    if (this.hasUpdated) {\n      if (!this._hasAssignedColumns()) {\n        this._stateController.setAutoColumnConfiguration();\n      }\n      this.pipeline();\n    }\n  }\n\n  @watch(PIPELINE)\n  protected async pipeline() {\n    this._dataState = await this._dataController.apply([...this.data], this._stateController);\n  }\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n  }\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', this._handleSlotChange.bind(this));\n    return root;\n  }\n\n  protected override firstUpdated(): void {\n    this.updateComplete.then(() => {\n      if (this.autoGenerate && !this._hasAssignedColumns()) {\n        this._stateController.setAutoColumnConfiguration();\n      }\n    });\n  }\n\n  private _hasAssignedColumns(): boolean {\n    const slot = this.renderRoot.querySelector('slot') as HTMLSlotElement;\n    const assignedNodes = slot\n      .assignedElements({ flatten: true })\n      .reduce<Element[]>(columnReducer, []);\n    return assignedNodes.length > 0;\n  }\n\n  private _handleSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement;\n    const assignedNodes = slot\n      .assignedElements({ flatten: true })\n      .reduce<Element[]>(columnReducer, []);\n\n    this._stateController.setColumnConfiguration(\n      assignedNodes as unknown as ColumnConfiguration<T>[]\n    );\n  }\n\n  /**\n   * Performs a filter operation in the grid based on the passed expression(s).\n   */\n  public filter(config: FilterExpression<T> | FilterExpression<T>[]): void {\n    const expressions = asArray(config).filter((expr) => {\n      const column = this.getColumn(expr.key);\n      return column !== undefined;\n    });\n\n    for (const expr of expressions) {\n      if (!isString(expr.condition)) {\n        continue;\n      }\n      expr.condition = (getFilterOperandsFor(this.getColumn(expr.key)!) as any)[expr.condition];\n    }\n\n    this._stateController.filtering.filter(expressions);\n  }\n\n  /**\n   * Performs a sort operation in the grid based on the passed expression(s).\n   */\n  public sort(expressions: SortingExpression<T> | SortingExpression<T>[]) {\n    this._stateController.sorting.sort(expressions);\n  }\n\n  /**\n   * Resets the current sort state of the control.\n   */\n  public clearSort(key?: Keys<T>): void {\n    this._stateController.sorting.reset(key);\n    this.requestUpdate(PIPELINE);\n  }\n\n  /**\n   * Resets the current filter state of the control.\n   */\n  public clearFilter(key?: Keys<T>): void {\n    this._stateController.filtering.reset(key);\n    this.requestUpdate(PIPELINE);\n  }\n\n  /**\n   * Navigates to a position in the grid based on provided row index and column field.\n   * @param row The row index to navigate to\n   * @param column The column field to navigate to, if any\n   * @param activate Optionally also activate the navigated cell\n   */\n  public async navigateTo(row: number, column?: Keys<T>, activate = false) {\n    await this._stateController.navigation.navigateTo(row, column, activate);\n  }\n\n  /**\n   * Returns a {@link ColumnConfiguration} for a given column.\n   */\n  public getColumn(id: Keys<T> | number): ColumnConfiguration<T> | undefined {\n    return this._stateController.columns.find((column, index) =>\n      isNumber(id) ? index === id : column.field === id\n    );\n  }\n\n  @eventOptions({ capture: true })\n  protected _bodyClickHandler(event: PointerEvent): void {\n    const target = getElementFromEventPath<IgcGridLiteCell<T>>(IgcGridLiteCell.tagName, event);\n\n    if (target) {\n      this._stateController.active = { column: target.column.field, row: target.row.index };\n    }\n  }\n\n  protected _bodyKeydownHandler(event: KeyboardEvent): void {\n    if (event.target === this._stateController.virtualizer) {\n      this._stateController.navigation.navigate(event);\n    }\n  }\n\n  protected _renderRow: RenderItemFunction<T> = (item: T, index: number) => {\n    const styles = {\n      ...this._domController.columnSizes,\n      ...this._domController.getActiveRowStyles(index),\n    };\n    const activeNode = this._stateController.active;\n\n    return html`\n      <igc-grid-lite-row\n        part=\"row\"\n        exportparts=\"cell\"\n        style=${styleMap(styles)}\n        .adoptRootStyles=${this.adoptRootStyles}\n        .index=${index}\n        .activeNode=${activeNode}\n        .data=${item}\n        .columns=${this._stateController.columns}\n      ></igc-grid-lite-row>\n    `;\n  };\n\n  protected _renderHeaderRow() {\n    return html`\n      <igc-grid-lite-header-row\n        tabindex=\"0\"\n        style=${styleMap(this._domController.columnSizes)}\n        .adoptRootStyles=${this.adoptRootStyles}\n        .columns=${this._stateController.columns}\n      ></igc-grid-lite-header-row>\n    `;\n  }\n\n  protected _renderBody() {\n    return html`\n      <igc-virtualizer\n        tabindex=\"0\"\n        .items=${this._dataState}\n        .renderItem=${this._renderRow}\n        @click=${this._bodyClickHandler}\n        @keydown=${this._bodyKeydownHandler}\n      ></igc-virtualizer>\n    `;\n  }\n\n  protected _renderFilterRow() {\n    return html`${cache(\n      this._stateController.columns.some((column) => column.filterable)\n        ? html`<igc-filter-row style=${styleMap(this._domController.columnSizes)}></igc-filter-row>`\n        : nothing\n    )}`;\n  }\n\n  protected override render() {\n    return html`\n      <slot part=\"column-sink\"></slot>\n      ${this._stateController.resizing.renderIndicator()} ${this._renderHeaderRow()}\n      ${this._renderFilterRow()} ${this._renderBody()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLite.tagName]: IgcGridLite;\n  }\n}\n"]}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/components/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport { θaddThemingController as addThemingController } from 'igniteui-webcomponents';\nimport { html, nothing, type PropertyValues } from 'lit';\nimport { eventOptions, property, state } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { createDataOperationsController } from '../controllers/data-operation.js';\nimport { createDomController } from '../controllers/dom.js';\nimport { createStateController } from '../controllers/state.js';\nimport { addA11y, headerRowsFor } from '../internal/a11y.js';\nimport { FOCUS_WITHIN, PIPELINE } from '../internal/constants.js';\nimport { COLUMN_UPDATE_CONTEXT, GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { getElementFromEventPath } from '../internal/element-from-event-path.js';\nimport { EventEmitterBase } from '../internal/mixins/event-emitter.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_TAG } from '../internal/tags.js';\nimport type {\n  ColumnConfiguration,\n  DataPipelineConfiguration,\n  GridLiteSortingOptions,\n  Keys,\n  NavigateToOptions,\n} from '../internal/types.js';\nimport { asArray, isNumber, isString, resolveCondition } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\nimport type { SortingExpression } from '../operations/sort/types.js';\nimport { styles as base } from '../styles/themes/grid.base.css.js';\nimport { all } from '../styles/themes/grid-themes.js';\nimport { styles as shared } from '../styles/themes/shared/grid.common.css.js';\nimport IgcGridLiteCell from './cell.js';\nimport { IgcGridLiteColumn } from './column.js';\nimport IgcFilterRow from './filter-row.js';\nimport IgcGridLiteHeaderRow from './header-row.js';\nimport IgcGridLiteRow from './row.js';\nimport IgcVirtualizer from './virtualizer.js';\n\n/**\n * Event object for the filtering event of the grid.\n */\nexport interface IgcFilteringEvent<T extends object = any> {\n  /**\n   * The target column for the filter operation.\n   */\n  key: Keys<T>;\n\n  /**\n   * The filter expression(s) to apply.\n   */\n  expressions: FilterExpression<T>[];\n\n  /**\n   * The type of modification which will be applied to the filter\n   * state of the column.\n   *\n   * @remarks\n   * `add` - a new filter expression will be added to the state of the column.\n   * `modify` - an existing filter expression will be modified.\n   * `remove` - the expression(s) will be removed from the state of the column.\n   */\n  type: 'add' | 'modify' | 'remove';\n}\n\n/**\n * Event object for the filtered event of the grid.\n */\nexport interface IgcFilteredEvent<T extends object = any> {\n  /**\n   * The target column for the filter operation.\n   */\n  key: Keys<T>;\n\n  /**\n   * The filter state of the column after the operation.\n   */\n  state: FilterExpression<T>[];\n}\n\n/**\n * Events for the igc-grid-lite.\n */\nexport interface IgcGridLiteEventMap<T extends object = any> {\n  /**\n   * Emitted when sorting is initiated through the UI.\n   * Returns the sort expression which will be used for the operation.\n   *\n   * @remarks\n   * The event is cancellable which prevents the operation from being applied.\n   * The expression can be modified prior to the operation running.\n   *\n   * @event\n   */\n  sorting: CustomEvent<SortingExpression<T, any>>;\n  /**\n   * Emitted when a sort operation initiated through the UI has completed.\n   * Returns the sort expression used for the operation.\n   *\n   * @event\n   */\n  sorted: CustomEvent<SortingExpression<T, any>>;\n  /**\n   * Emitted when filtering is initiated through the UI.\n   *\n   * @remarks\n   * The event is cancellable which prevents the operation from being applied.\n   * The expression can be modified prior to the operation running.\n   *\n   * @event\n   */\n  filtering: CustomEvent<IgcFilteringEvent<T>>;\n  /**\n   * Emitted when a filter operation initiated through the UI has completed.\n   * Returns the filter state for the affected column.\n   *\n   * @event\n   */\n  filtered: CustomEvent<IgcFilteredEvent<T>>;\n}\n\n/**\n * IgcGridLite is a web component for displaying data in a tabular format quick and easy.\n *\n * Out of the box it provides row virtualization, sort and filter operations (client and server side),\n * the ability to template cells and headers and column hiding.\n *\n * @element igc-grid-lite\n *\n * @fires sorting - Emitted when sorting is initiated through the UI.\n * @fires sorted - Emitted when a sort operation initiated through the UI has completed.\n * @fires filtering - Emitted when filtering is initiated through the UI.\n * @fires filtered - Emitted when a filter operation initiated through the UI has completed.\n *\n */\nexport class IgcGridLite<T extends object = any> extends EventEmitterBase<IgcGridLiteEventMap<T>> {\n  public static get tagName() {\n    return GRID_TAG;\n  }\n\n  public static override styles = [base, shared];\n\n  public static register(): void {\n    registerComponent(\n      IgcGridLite,\n      IgcGridLiteColumn,\n      IgcVirtualizer,\n      IgcGridLiteRow,\n      IgcGridLiteHeaderRow\n    );\n  }\n\n  private readonly _a11y = addA11y(this, 'grid');\n\n  protected readonly _domController = createDomController<T>(this);\n  protected readonly _stateController = createStateController(\n    this,\n    this._domController,\n    this._updateObservers\n  );\n  protected readonly _dataController = createDataOperationsController(this);\n\n  protected readonly _stateProvider = new ContextProvider(this, {\n    context: GRID_STATE_CONTEXT,\n    initialValue: this._stateController,\n  });\n\n  protected readonly _columnUpdateProvider = new ContextProvider(this, {\n    context: COLUMN_UPDATE_CONTEXT,\n    initialValue: ((config: ColumnConfiguration<T>) => {\n      this._updateConfiguration(config);\n    }) as any,\n  });\n\n  private _updateObservers(): void {\n    this._stateProvider.updateObservers();\n  }\n\n  private _updateConfiguration(config: ColumnConfiguration<T>): void {\n    this._stateController.updateColumnsConfiguration(asArray(config));\n  }\n\n  @state()\n  protected _dataState: T[] = [];\n\n  /** Monotonic token identifying the most recently started pipeline run. */\n  private _pipelineEpoch = 0;\n\n  private _pipelineTask: Promise<void> = Promise.resolve();\n\n  /**\n   * Resolves when the latest pipeline run completes and its result is rendered.\n   * The sort and filter controllers await this so that `sorted` and `filtered`\n   * report an up-to-date {@link IgcGridLite.dataView}.\n   *\n   * @internal\n   */\n  public get _pipelineComplete(): Promise<void> {\n    // The `updateComplete` hop lets a pending PIPELINE update install its task first.\n    return this.updateComplete.then(() => this._pipelineTask);\n  }\n\n  @property({ type: Boolean, reflect: true, attribute: 'adopt-root-styles' })\n  public adoptRootStyles = false;\n\n  /** The data source for the grid. */\n  @property({ attribute: false })\n  public data: T[] = [];\n\n  /**\n   * Whether the grid will try to \"resolve\" its column configuration based on the passed\n   * data source.\n   *\n   * @remarks\n   * This is usually executed on initial rendering in the DOM. It depends on having an existing data source\n   * to infer the column configuration for the grid.\n   * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually\n   * result in empty column configuration for the grid.\n   *\n   * This property is ignored if any existing column configuration already exists in the grid.\n   *\n   * In a scenario where you want to bind a new data source and still keep the auto-generation behavior,\n   * make sure to reset the column collection of the grid before passing in the new data source.\n   *\n   * @example\n   * ```typescript\n   * // assuming autoGenerate is set to true\n   * grid.columns = [];\n   * grid.data = [...];\n   * ```\n   *\n   * @attr auto-generate\n   */\n  @property({ type: Boolean, attribute: 'auto-generate' })\n  public autoGenerate = false;\n\n  /** Sort configuration property for the grid. */\n  @property({ attribute: false })\n  public sortingOptions: GridLiteSortingOptions = {\n    mode: 'multiple',\n  };\n\n  /**\n   * Configuration object which controls remote data operations for the grid.\n   */\n  @property({ attribute: false })\n  public dataPipelineConfiguration!: DataPipelineConfiguration<T>;\n\n  /**\n   * Set the sort state for the grid.\n   */\n  public set sortingExpressions(expressions: SortingExpression<T>[]) {\n    this._stateController.sorting.reset();\n    if (this.hasUpdated) {\n      this.sort(expressions);\n    } else {\n      for (const expr of expressions) {\n        this._stateController.sorting.state.set(expr.key, { ...expr });\n      }\n    }\n  }\n\n  /**\n   * Get the sort state for the grid.\n   */\n  @property({ attribute: false })\n  public get sortingExpressions(): SortingExpression<T>[] {\n    return Array.from(this._stateController.sorting.state.values(), (expr) => ({ ...expr }));\n  }\n\n  /**\n   * Set the filter state for the grid.\n   */\n  public set filterExpressions(expressions: FilterExpression<T>[]) {\n    this._stateController.filtering.reset();\n    if (this.hasUpdated) {\n      this.filter(expressions);\n    } else {\n      this._stateController.filtering.setRaw(expressions);\n    }\n  }\n\n  /**\n   * Get the filter state for the grid.\n   */\n  @property({ attribute: false })\n  public get filterExpressions(): FilterExpression<T>[] {\n    return this._stateController.filtering.state.values.flatMap((each) =>\n      each.all.map((expr) => ({ ...expr }))\n    );\n  }\n\n  /**\n   * Sets the column configuration for the grid.\n   *\n   * @remarks\n   * Passing an empty collection resets the columns, which - with `autoGenerate` -\n   * lets the next data source binding re-generate them.\n   */\n  public set columns(configuration: ColumnConfiguration<T>[]) {\n    this._stateController.setColumnConfiguration(asArray(configuration));\n  }\n\n  /**\n   * Returns the column configuration of the grid.\n   */\n  public get columns(): ColumnConfiguration<T>[] {\n    return this._stateController.columns.map((col) => ({ ...col }));\n  }\n\n  /**\n   * Returns the collection of rendered row elements in the grid.\n   *\n   * @remarks\n   * Since the grid has virtualization, this property returns only the currently rendered\n   * chunk of elements in the DOM.\n   */\n  public get rows() {\n    return this._domController.rows;\n  }\n\n  /**\n   * Returns the state of the data source after sort/filter operations\n   * have been applied.\n   */\n  public get dataView(): ReadonlyArray<T> {\n    return this._dataState;\n  }\n\n  /**\n   * The total number of items in the {@link IgcGridLite.dataView} collection.\n   */\n  public get totalItems(): number {\n    return this._dataState.length;\n  }\n\n  @watch('sortingOptions', { waitUntilFirstUpdate: true })\n  protected sortingOptionsChanged() {\n    // Headers render the multi-sort position out of this option.\n    this._updateObservers();\n  }\n\n  @watch('data')\n  protected dataChanged() {\n    this._dataState = [...this.data];\n\n    if (this.hasUpdated) {\n      if (!this._hasAssignedColumns()) {\n        this._stateController.setAutoColumnConfiguration();\n      }\n      this.pipeline();\n    }\n  }\n\n  /**\n   * NOTE: The `PIPELINE` sentinel equals this method's name. That equality makes\n   * the `@watch` comparison (`undefined !== <method>`) fire on each requested\n   * update. A rename of this method silently disables the pipeline.\n   */\n  @watch(PIPELINE)\n  protected pipeline(): void {\n    this._pipelineTask = this._runPipeline();\n  }\n\n  /** Runs the data operations. Discards a result that a newer run supersedes. */\n  private async _runPipeline(): Promise<void> {\n    const epoch = ++this._pipelineEpoch;\n\n    try {\n      const state = await this._dataController.apply([...this.data], this._stateController);\n\n      if (epoch !== this._pipelineEpoch) {\n        return;\n      }\n\n      this._dataState = state;\n    } catch (e) {\n      // A failed hook must not blank the grid. Keep the previous data state and\n      // report the error.\n      // biome-ignore lint/suspicious/noConsole: the pipeline hooks are user code; swallowing their errors hides bugs\n      console.error(e);\n    }\n\n    await this.updateComplete;\n  }\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n  }\n\n  /** The column set the current row renderer was built from. */\n  private _rowColumns?: ColumnConfiguration<T>[];\n\n  protected override willUpdate(props: PropertyValues<this>): void {\n    const { columns } = this._stateController;\n\n    this._domController.setColumns(columns);\n\n    // The ARIA grid pattern counts the header rows in the row count. Only visible\n    // columns take part in the column index space.\n    this._a11y.set({\n      ariaRowCount: `${headerRowsFor(columns) + this._dataState.length}`,\n      ariaColCount: `${columns.filter((column) => !column.hidden).length}`,\n    });\n\n    // The virtualizer re-renders its rows only when `renderItem` changes identity.\n    // Build a new renderer only when a row input changes.\n    if (columns !== this._rowColumns || props.has('adoptRootStyles')) {\n      this._rowColumns = columns;\n      this._renderRow = this._createRowRenderer(columns);\n    }\n  }\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', this._handleSlotChange.bind(this));\n    return root;\n  }\n\n  protected override firstUpdated(): void {\n    this.updateComplete.then(() => {\n      if (this.autoGenerate && !this._hasAssignedColumns()) {\n        this._stateController.setAutoColumnConfiguration();\n      }\n    });\n  }\n\n  /** The column elements assigned to the slot, either direct or nested in a container. */\n  private _assignedColumns(): Element[] {\n    const slot = this.renderRoot.querySelector('slot') as HTMLSlotElement;\n    const tag = IgcGridLiteColumn.tagName;\n\n    return slot\n      .assignedElements({ flatten: true })\n      .flatMap((el) => (el.matches(tag) ? el : Array.from(el.querySelectorAll(tag))));\n  }\n\n  private _hasAssignedColumns(): boolean {\n    return this._assignedColumns().length > 0;\n  }\n\n  private _handleSlotChange(): void {\n    this._stateController.setColumnConfiguration(\n      this._assignedColumns() as unknown as ColumnConfiguration<T>[]\n    );\n  }\n\n  /**\n   * Performs a filter operation in the grid based on the passed expression(s).\n   */\n  public filter(config: FilterExpression<T> | FilterExpression<T>[]): void {\n    // Store copies. The caller's expression objects must not change.\n    const expressions = asArray(config)\n      .filter((expr) => this.getColumn(expr.key) !== undefined)\n      .map((expr) => ({ ...expr }));\n\n    for (const expr of expressions) {\n      if (isString(expr.condition)) {\n        expr.condition = resolveCondition(this.getColumn(expr.key)!, expr.condition);\n      }\n    }\n\n    this._stateController.filtering.filter(expressions);\n  }\n\n  /**\n   * Performs a sort operation in the grid based on the passed expression(s).\n   */\n  public sort(expressions: SortingExpression<T> | SortingExpression<T>[]) {\n    this._stateController.sorting.sort(expressions);\n  }\n\n  /**\n   * Resets the current sort state of the control.\n   */\n  public clearSort(key?: Keys<T>): void {\n    this._stateController.sorting.reset(key);\n    this.requestUpdate(PIPELINE);\n  }\n\n  /**\n   * Resets the current filter state of the control.\n   */\n  public clearFilter(key?: Keys<T>): void {\n    this._stateController.filtering.reset(key);\n    this.requestUpdate(PIPELINE);\n  }\n\n  /**\n   * Navigates to a position in the grid based on provided row index and column field.\n   * @param row The row index to navigate to\n   * @param options The column field to navigate to and whether to activate the cell\n   */\n  public async navigateTo(row: number, options?: NavigateToOptions<T>): Promise<void>;\n  /**\n   * Navigates to a position in the grid based on provided row index and column field.\n   * @param row The row index to navigate to\n   * @param column The column field to navigate to, if any\n   * @param activate Optionally also activate the navigated cell\n   * @deprecated Use `navigateTo(row, options)` instead.\n   */\n  public async navigateTo(row: number, column?: Keys<T>, activate?: boolean): Promise<void>;\n  public async navigateTo(\n    row: number,\n    columnOrOptions?: Keys<T> | NavigateToOptions<T>,\n    activate?: boolean\n  ): Promise<void> {\n    // Normalize the deprecated positional form into options.\n    const options =\n      typeof columnOrOptions === 'object' ? columnOrOptions : { column: columnOrOptions, activate };\n\n    await this._stateController.navigation.navigateTo(row, options);\n  }\n\n  /**\n   * Returns a {@link ColumnConfiguration} for a given column.\n   */\n  public getColumn(id: Keys<T> | number): ColumnConfiguration<T> | undefined {\n    const columns = this._stateController.columns;\n    return isNumber(id) ? columns[id] : columns.find((column) => column.field === id);\n  }\n\n  @eventOptions({ capture: true })\n  protected _bodyClickHandler(event: PointerEvent): void {\n    const target = getElementFromEventPath<IgcGridLiteCell<T>>(IgcGridLiteCell.tagName, event);\n\n    if (target) {\n      this._stateController.active = { column: target.column.field, row: target.row.index };\n\n      // Move focus so that assistive technology announces the cell. Keep focus\n      // where it is when the click landed on focusable templated content.\n      if (!target.matches(FOCUS_WITHIN)) {\n        target.focus({ preventScroll: true });\n      }\n    }\n  }\n\n  protected _bodyKeydownHandler(event: KeyboardEvent): void {\n    const [origin] = event.composedPath();\n\n    // Keys from the grid focus targets (the scroller and the focused cell) drive\n    // navigation. Keys from templated content in a cell pass through.\n    if (origin === this._domController.virtualizer || origin instanceof IgcGridLiteCell) {\n      this._stateController.navigation.navigate(event);\n    }\n  }\n\n  /** Rebuilt by {@link IgcGridLite.willUpdate} when a row input changes. */\n  protected _renderRow: RenderItemFunction<T> = () => html``;\n\n  private _createRowRenderer(columns: ColumnConfiguration<T>[]): RenderItemFunction<T> {\n    // The active node is read live. Activation updates only the affected rows (see\n    // NavigationController) and must not rebuild the renderer: a new renderer\n    // identity makes the virtualizer re-render every visible row.\n    return (item: T, index: number) => html`\n      <igc-grid-lite-row\n        part=\"row\"\n        exportparts=\"cell\"\n        style=${styleMap(this._domController.columnSizes)}\n        .adoptRootStyles=${this.adoptRootStyles}\n        .index=${index}\n        .activeNode=${this._stateController.active}\n        .data=${item}\n        .columns=${columns}\n      ></igc-grid-lite-row>\n    `;\n  }\n\n  protected _renderHeaderRow() {\n    return html`\n      <igc-grid-lite-header-row\n        tabindex=\"0\"\n        style=${styleMap(this._domController.columnSizes)}\n        .adoptRootStyles=${this.adoptRootStyles}\n        .columns=${this._stateController.columns}\n      ></igc-grid-lite-header-row>\n    `;\n  }\n\n  protected _renderBody() {\n    return html`\n      <igc-grid-lite-virtualizer\n        tabindex=\"0\"\n        .items=${this._dataState}\n        .renderItem=${this._renderRow}\n        @click=${this._bodyClickHandler}\n        @keydown=${this._bodyKeydownHandler}\n      ></igc-grid-lite-virtualizer>\n    `;\n  }\n\n  protected _renderFilterRow() {\n    const filterable = this._stateController.columns.some((column) => column.filterable);\n\n    // The filter row and its editors are registered on first use. A grid without\n    // filterable columns does not load their custom element definitions.\n    if (filterable) {\n      IgcFilterRow.register();\n    }\n\n    return html`${cache(\n      filterable\n        ? html`<igc-grid-lite-filter-row\n            style=${styleMap(this._domController.columnSizes)}\n          ></igc-grid-lite-filter-row>`\n        : nothing\n    )}`;\n  }\n\n  protected override render() {\n    return html`\n      <slot part=\"column-sink\"></slot>\n      ${this._stateController.resizing.renderIndicator()} ${this._renderHeaderRow()}\n      ${this._renderFilterRow()} ${this._renderBody()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLite.tagName]: IgcGridLite;\n  }\n}\n"]}

package/components/header-row.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 import type { ColumnConfiguration } from '../internal/types.js';
 import IgcGridLiteHeader from './header.js';
 export default class IgcGridLiteHeaderRow<T extends object> extends LitElement {
@@ -11,7 +11,6 @@ export default class IgcGridLiteHeaderRow<T extends object> extends LitElement {
     get headers(): IgcGridLiteHeader<T>[];
     constructor();
     private _setActiveFilterColumn;
-    protected shouldUpdate(props: PropertyValues<this>): boolean;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/header-row.js

@@ -8,6 +8,7 @@ import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { addA11y, HEADER_ROW_INDEX } from '../internal/a11y.js';
 import { GRID_STATE_CONTEXT } from '../internal/context.js';
 import { getElementFromEventPath } from '../internal/element-from-event-path.js';
 import { partMap } from '../internal/part-map.js';
@@ -30,27 +31,23 @@ export default class IgcGridLiteHeaderRow extends LitElement {
         super();
         this.adoptRootStyles = false;
         this.columns = [];
+        addA11y(this, 'row').set({ ariaRowIndex: `${HEADER_ROW_INDEX}` });
         this.addEventListener('click', this._setActiveFilterColumn);
     }
     _setActiveFilterColumn(event) {
         const header = getElementFromEventPath(IgcGridLiteHeader.tagName, event);
         this._state?.filtering.setActiveColumn(header?.column);
     }
-    shouldUpdate(props) {
-        for (const header of this.headers) {
-            header.requestUpdate();
-        }
-        return super.shouldUpdate(props);
-    }
     render() {
         const filterRow = this._state?.filtering.filterRow;
         const columns = this.columns.filter((column) => !column.hidden);
         return html `
-      ${repeat(columns, (column) => column, (column) => html `
+      ${repeat(columns, (column) => column.field, (column, index) => html `
           <igc-grid-lite-header
             part=${partMap({ filtered: column.field === filterRow?.column?.field })}
             .adoptRootStyles=${this.adoptRootStyles}
             .column=${column}
+            ._colIndex=${index + 1}
           ></igc-grid-lite-header>
         `)}
     `;

package/components/header-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-row.js","sourceRoot":"","sources":["../../src/components/header-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AACrE,OAAO,iBAAiB,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,oBAAuC,SAAQ,UAAU;IACrE,MAAM,KAAK,OAAO;QACvB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;aACsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;IAC7D,CAAC;IAWD,IAAW,OAAO;QAChB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAuB,iBAAiB,CAAC,OAAO,CAAC,CAClF,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAZH,oBAAe,GAAG,KAAK,CAAC;QAGxB,YAAO,GAA6B,EAAE,CAAC;QAU5C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC9D,CAAC;IAEO,sBAAsB,CAAC,KAAmB;QAChD,MAAM,MAAM,GAAG,uBAAuB,CAAuB,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzD,CAAC;IAEkB,YAAY,CAAC,KAA2B;QACzD,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClC,MAAM,CAAC,aAAa,EAAE,CAAC;QACzB,CAAC;QAED,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAEkB,MAAM;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC;QACnD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAEhE,OAAO,IAAI,CAAA;QACP,MAAM,CACN,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,EAClB,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;+BACpD,IAAI,CAAC,eAAe;sBAC7B,MAAM;;SAEnB,CACF;KACF,CAAC;IACJ,CAAC;;AAjDgB;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;oDACb;AAGtC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DACA;AAGxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDACe","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { StateController } from '../controllers/state.js';\nimport { GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { getElementFromEventPath } from '../internal/element-from-event-path.js';\nimport { partMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { styles } from '../styles/header-row/header-row.base.css.js';\nimport IgcGridLiteHeader from './header.js';\n\nexport default class IgcGridLiteHeaderRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteHeaderRow, IgcGridLiteHeader);\n  }\n\n  @consume({ context: GRID_STATE_CONTEXT, subscribe: true })\n  private readonly _state?: StateController<T>;\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  @property({ attribute: false })\n  public columns: ColumnConfiguration<T>[] = [];\n\n  public get headers(): IgcGridLiteHeader<T>[] {\n    return Array.from(\n      this.renderRoot.querySelectorAll<IgcGridLiteHeader<T>>(IgcGridLiteHeader.tagName)\n    );\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._setActiveFilterColumn);\n  }\n\n  private _setActiveFilterColumn(event: PointerEvent): void {\n    const header = getElementFromEventPath<IgcGridLiteHeader<T>>(IgcGridLiteHeader.tagName, event);\n    this._state?.filtering.setActiveColumn(header?.column);\n  }\n\n  protected override shouldUpdate(props: PropertyValues<this>): boolean {\n    for (const header of this.headers) {\n      header.requestUpdate();\n    }\n\n    return super.shouldUpdate(props);\n  }\n\n  protected override render() {\n    const filterRow = this._state?.filtering.filterRow;\n    const columns = this.columns.filter((column) => !column.hidden);\n\n    return html`\n      ${repeat(\n        columns,\n        (column) => column,\n        (column) => html`\n          <igc-grid-lite-header\n            part=${partMap({ filtered: column.field === filterRow?.column?.field })}\n            .adoptRootStyles=${this.adoptRootStyles}\n            .column=${column}\n          ></igc-grid-lite-header>\n        `\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeaderRow.tagName]: IgcGridLiteHeaderRow<object>;\n  }\n}\n"]}
+{"version":3,"file":"header-row.js","sourceRoot":"","sources":["../../src/components/header-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AACrE,OAAO,iBAAiB,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,oBAAuC,SAAQ,UAAU;IACrE,MAAM,KAAK,OAAO;QACvB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;aACsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;IAC7D,CAAC;IAWD,IAAW,OAAO;QAChB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAuB,iBAAiB,CAAC,OAAO,CAAC,CAClF,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAZH,oBAAe,GAAG,KAAK,CAAC;QAGxB,YAAO,GAA6B,EAAE,CAAC;QAW5C,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC9D,CAAC;IAEO,sBAAsB,CAAC,KAAmB;QAChD,MAAM,MAAM,GAAG,uBAAuB,CAAuB,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzD,CAAC;IAEkB,MAAM;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC;QACnD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAEhE,OAAO,IAAI,CAAA;QACP,MAAM,CACN,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EACxB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEZ,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;+BACpD,IAAI,CAAC,eAAe;sBAC7B,MAAM;yBACH,KAAK,GAAG,CAAC;;SAEzB,CACF;KACF,CAAC;IACJ,CAAC;;AA5CgB;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;oDACb;AAGtC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DACA;AAGxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDACe","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { StateController } from '../controllers/state.js';\nimport { addA11y, HEADER_ROW_INDEX } from '../internal/a11y.js';\nimport { GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { getElementFromEventPath } from '../internal/element-from-event-path.js';\nimport { partMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { styles } from '../styles/header-row/header-row.base.css.js';\nimport IgcGridLiteHeader from './header.js';\n\nexport default class IgcGridLiteHeaderRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteHeaderRow, IgcGridLiteHeader);\n  }\n\n  @consume({ context: GRID_STATE_CONTEXT, subscribe: true })\n  private readonly _state?: StateController<T>;\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  @property({ attribute: false })\n  public columns: ColumnConfiguration<T>[] = [];\n\n  public get headers(): IgcGridLiteHeader<T>[] {\n    return Array.from(\n      this.renderRoot.querySelectorAll<IgcGridLiteHeader<T>>(IgcGridLiteHeader.tagName)\n    );\n  }\n\n  constructor() {\n    super();\n\n    addA11y(this, 'row').set({ ariaRowIndex: `${HEADER_ROW_INDEX}` });\n    this.addEventListener('click', this._setActiveFilterColumn);\n  }\n\n  private _setActiveFilterColumn(event: PointerEvent): void {\n    const header = getElementFromEventPath<IgcGridLiteHeader<T>>(IgcGridLiteHeader.tagName, event);\n    this._state?.filtering.setActiveColumn(header?.column);\n  }\n\n  protected override render() {\n    const filterRow = this._state?.filtering.filterRow;\n    const columns = this.columns.filter((column) => !column.hidden);\n\n    return html`\n      ${repeat(\n        columns,\n        (column) => column.field,\n        (column, index) => html`\n          <igc-grid-lite-header\n            part=${partMap({ filtered: column.field === filterRow?.column?.field })}\n            .adoptRootStyles=${this.adoptRootStyles}\n            .column=${column}\n            ._colIndex=${index + 1}\n          ></igc-grid-lite-header>\n        `\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeaderRow.tagName]: IgcGridLiteHeaderRow<object>;\n  }\n}\n"]}