igniteui-grid-lite 0.9.0 → 0.11.0

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":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,qBAAqB,IAAI,oBAAoB,EAC7C,yBAAyB,GAE1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAQ/C,OAAO,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,cAAc,GACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG7C,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,eAAe,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,oBAAoB,MAAM,iBAAiB,CAAC;AACnD,OAAO,cAAc,MAAM,UAAU,CAAC;AAkGtC,MAAM,OAAO,WAAoC,SAAQ,gBAAwC;IACxF,MAAM,KAAK,OAAO;QACvB,OAAO,QAAQ,CAAC;IAClB,CAAC;aAEsB,WAAM,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,AAAjB,CAAkB;IAExC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,WAAW,EACX,iBAAiB,EACjB,yBAAyB,EACzB,cAAc,EACd,oBAAoB,CACrB,CAAC;IACJ,CAAC;IAmCD,IAAW,iBAAiB;QAE1B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,CAAC;IAmDD,IAAW,kBAAkB,CAAC,WAAmC;QAC/D,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACtC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;gBAC/B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;IACH,CAAC;IAMD,IAAW,kBAAkB;QAC3B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC;IAKD,IAAW,iBAAiB,CAAC,WAAkC;QAC7D,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAMD,IAAW,iBAAiB;QAC1B,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CACnE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CACtC,CAAC;IACJ,CAAC;IASD,IAAW,OAAO,CAAC,aAAuC;QACxD,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;IACvE,CAAC;IAKD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;IAClE,CAAC;IASD,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;IAClC,CAAC;IAMD,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAKD,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;IAChC,CAAC;IAGS,qBAAqB;QAE7B,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAGS,WAAW;QACnB,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,CAAC;QACrD,CAAC;QAED,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAOS,QAAQ;QAChB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IAC3C,CAAC;IAGO,KAAK,CAAC,YAAY;QACxB,MAAM,KAAK,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC;QAEpC,IAAI,CAAC;YACH,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAEtF,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;gBAClC,OAAO;YACT,CAAC;YAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YAGX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;QAED,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAhOO,UAAK,GAAG,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAE5B,mBAAc,GAAG,mBAAmB,CAAI,IAAI,CAAC,CAAC;QAC9C,qBAAgB,GAAG,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE,CAC1F,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,CACtC,CAAC;QACiB,oBAAe,GAAG,8BAA8B,CAAC,IAAI,CAAC,CAAC;QAEvD,mBAAc,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE;YAC5D,OAAO,EAAE,kBAAkB;YAC3B,YAAY,EAAE,IAAI,CAAC,gBAAgB;SACpC,CAAC,CAAC;QAEgB,0BAAqB,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE;YACnE,OAAO,EAAE,qBAAqB;YAC9B,YAAY,EAAE,CAAC,CAAC,MAA8B,EAAE,EAAE;gBAChD,IAAI,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YACpE,CAAC,CAAQ;SACV,CAAC,CAAC;QAGO,eAAU,GAAQ,EAAE,CAAC;QAGvB,mBAAc,GAAG,CAAC,CAAC;QAEnB,kBAAa,GAAkB,OAAO,CAAC,OAAO,EAAE,CAAC;QAalD,oBAAe,GAAG,KAAK,CAAC;QAIxB,SAAI,GAAQ,EAAE,CAAC;QA2Bf,iBAAY,GAAG,KAAK,CAAC;QAIrB,mBAAc,GAA2B;YAC9C,IAAI,EAAE,UAAU;SACjB,CAAC;QAsJA,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAKkB,UAAU,CAAC,KAA2B;QACvD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAE1C,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAGxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YACb,YAAY,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;YAClE,YAAY,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE;SAClD,CAAC,CAAC;QAGH,IAAI,OAAO,KAAK,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACjE,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEkB,gBAAgB;QACjC,MAAM,IAAI,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;gBACrD,IAAI,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,CAAC;YACrD,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAGO,gBAAgB;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAC;QACtE,MAAM,GAAG,GAAG,iBAAiB,CAAC,OAAO,CAAC;QAEtC,OAAO,IAAI;aACR,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aACnC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACpF,CAAC;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5C,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAC1C,IAAI,CAAC,gBAAgB,EAAyC,CAC/D,CAAC;IACJ,CAAC;IAKM,MAAM,CAAC,MAAmD;QAE/D,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC;aAChC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC;aACxD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;QAEhC,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;YAC/B,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAE,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAC/E,CAAC;QACH,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACtD,CAAC;IAKM,IAAI,CAAC,WAA0D;QACpE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,CAAC;IAKM,SAAS,CAAC,GAAa;QAC5B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAKM,WAAW,CAAC,GAAa;QAC9B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC3C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAgBM,KAAK,CAAC,UAAU,CACrB,GAAW,EACX,eAAgD,EAChD,QAAkB;QAGlB,MAAM,OAAO,GACX,OAAO,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC;QAEhG,MAAM,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC;IAKM,SAAS,CAAC,EAAoB;QACnC,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;QAC9C,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;IACpF,CAAC;IAGS,iBAAiB,CAAC,KAAmB;QAC7C,MAAM,MAAM,GAAG,uBAAuB,CAAqB,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAE3F,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;QAGtF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YAClC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAES,mBAAmB,CAAC,KAAoB;QAChD,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAGtC,IAAI,MAAM,KAAK,KAAK,CAAC,aAAa,IAAI,MAAM,YAAY,eAAe,EAAE,CAAC;YACxE,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAKO,kBAAkB,CAAC,OAAiC;QAE1D,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;;gBAIrB,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;2BAC9B,IAAI,CAAC,eAAe;iBAC9B,KAAK;sBACA,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,CAAC;gBACxD,KAAK;mBACF,OAAO;;KAErB,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;2BAC9B,IAAI,CAAC,eAAe;mBAC5B,IAAI,CAAC,gBAAgB,CAAC,OAAO;;KAE3C,CAAC;IACJ,CAAC;IAES,WAAW;QAGnB,OAAO,IAAI,CAAA;;;oBAGK,EAAE;;gBAEN,IAAI,CAAC,UAAU;wBACP,IAAI,CAAC,UAAU;iBACtB,IAAI,CAAC,iBAAiB;mBACpB,IAAI,CAAC,mBAAmB;;KAEtC,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAGrF,IAAI,UAAU,EAAE,CAAC;YACf,YAAY,CAAC,QAAQ,EAAE,CAAC;QAC1B,CAAC;QAED,OAAO,KAAK,CACV,UAAU;YACR,CAAC,CAAC,IAAI,CAAA;oBACM,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;uCACtB;YAC/B,CAAC,CAAC,OAAO,CACZ,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE;QAC3E,IAAI,CAAC,gBAAgB,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE;KAChD,CAAC;IACJ,CAAC;;AAhbS;IADT,KAAK,EAAE;+CACuB;AAkBxB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDAC5C;AAIxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACT;AA2Bf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAC5B;AAIrB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;mDAG7B;AAMK;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8DACiC;AAoBhE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAG9B;AAkBD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDAK9B;AA+CS;IADT,KAAK,CAAC,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;wDAIvD;AAGS;IADT,KAAK,CAAC,MAAM,CAAC;8CAab;AAOS;IADT,KAAK,CAAC,QAAQ,CAAC;2CAGf;AAgKS;IADT,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAc/B","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport {\n  θaddThemingController as addThemingController,\n  IgcVirtualScrollComponent,\n  type VirtualScrollItemTemplate,\n} 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 { activeNodeFor } from '../controllers/navigation.js';\nimport { createStateController } from '../controllers/state.js';\nimport { addA11y, headerRowsFor } from '../internal/a11y.js';\nimport { FOCUS_WITHIN, NO_SCROLL, 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 {\n  asArray,\n  isNumber,\n  isString,\n  resolveCondition,\n  visibleColumns,\n} 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';\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      IgcVirtualScrollComponent,\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(this, this._domController, () =>\n    this._stateProvider.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._stateController.updateColumnsConfiguration(asArray(config));\n    }) as any,\n  });\n\n  @state()\n  protected _dataState: T[] = [];\n\n  /** Id of the latest pipeline run. */\n  private _pipelineEpoch = 0;\n\n  private _pipelineTask: Promise<void> = Promise.resolve();\n\n  /**\n   * Resolves once the latest pipeline run renders. `sorted` and `filtered` await it.\n   *\n   * @internal\n   */\n  public get _pipelineComplete(): Promise<void> {\n    // Let 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._stateController.updateObservers();\n  }\n\n  @watch('data')\n  protected dataChanged() {\n    this._dataState = [...this.data];\n\n    if (!this.hasUpdated) {\n      return;\n    }\n\n    if (!this._hasAssignedColumns()) {\n      this._stateController.setAutoColumnConfiguration();\n    }\n\n    this.pipeline();\n  }\n\n  /**\n   * NOTE: `PIPELINE` equals this method's name, so `@watch` fires on each request.\n   * Renaming the 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 results superseded by a newer run. */\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 keeps the previous data. Log it.\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  /** Columns the 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    // Row count includes the header rows. Only visible columns are indexed.\n    this._a11y.set({\n      ariaRowCount: `${headerRowsFor(columns) + this._dataState.length}`,\n      ariaColCount: `${visibleColumns(columns).length}`,\n    });\n\n    // A new `itemTemplate` re-renders every visible row: rebuild only on row input change.\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      return;\n    }\n\n    this._stateController.active = { column: target.column.field, row: target.row.index };\n\n    // Focus announces the cell. Focusable templated content keeps the focus.\n    if (!target.matches(FOCUS_WITHIN)) {\n      target.focus(NO_SCROLL);\n    }\n  }\n\n  protected _bodyKeydownHandler(event: KeyboardEvent): void {\n    const [origin] = event.composedPath();\n\n    // Only keys from the body or a cell navigate. Templated content keeps its keys.\n    if (origin === event.currentTarget || origin instanceof IgcGridLiteCell) {\n      this._stateController.navigation.navigate(event);\n    }\n  }\n\n  /** Rebuilt in {@link IgcGridLite.willUpdate}. */\n  protected _renderRow!: VirtualScrollItemTemplate<T>;\n\n  private _createRowRenderer(columns: ColumnConfiguration<T>[]): VirtualScrollItemTemplate<T> {\n    // Reads the active node live: activation must not rebuild the renderer.\n    return ({ value, index }) => 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=${activeNodeFor(this._stateController.active, index)}\n        .data=${value}\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    // The body is the tab stop. Focus roves to the active cell:\n    // `aria-activedescendant` cannot cross the row shadow roots.\n    return html`\n      <igc-virtual-scroll\n        role=\"rowgroup\"\n        .overScan=${10}\n        tabindex=\"0\"\n        .data=${this._dataState}\n        .itemTemplate=${this._renderRow}\n        @click=${this._bodyClickHandler}\n        @keydown=${this._bodyKeydownHandler}\n      ></igc-virtual-scroll>\n    `;\n  }\n\n  protected _renderFilterRow() {\n    const filterable = this._stateController.columns.some((column) => column.filterable);\n\n    // Registered on first use: see IgcFilterRow.\n    if (filterable) {\n      IgcFilterRow.register();\n    }\n\n    return 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,11 +8,13 @@ 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';
 import { registerComponent } from '../internal/register.js';
 import { GRID_HEADER_ROW_TAG } from '../internal/tags.js';
+import { visibleColumns } from '../internal/utils.js';
 import { styles } from '../styles/header-row/header-row.base.css.js';
 import IgcGridLiteHeader from './header.js';
 export default class IgcGridLiteHeaderRow extends LitElement {
@@ -30,27 +32,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);
+        const columns = visibleColumns(this.columns);
         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,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,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,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE7C,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 { visibleColumns } from '../internal/utils.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 = visibleColumns(this.columns);\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"]}

package/components/header.d.ts

@@ -7,13 +7,22 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
     static styles: import("lit").CSSResult;
     static register(): void;
     private readonly _adoptedStylesController;
+    private readonly _a11y;
     protected get context(): IgcHeaderContext<T>;
     protected get isSortable(): boolean;
     protected get resizeController(): import("../controllers/resize.js").ResizeController<T>;
     state: StateController<T>;
     column: ColumnConfiguration<T>;
     adoptRootStyles: boolean;
+    /**
+     * Position of the header among the visible columns. Written as its 1-based
+     * `aria-colindex`.
+     *
+     * @internal
+     */
+    _colIndex: number;
     constructor();
+    private get _shouldAdoptStyles();
     protected update(props: PropertyValues<this>): void;
     private _handleThemeChange;
     protected renderSortPart(): import("lit-html").TemplateResult<1> | typeof nothing;

package/components/header.js

@@ -8,6 +8,7 @@ import { consume } from '@lit/context';
 import { θaddAdoptedStylesController as addAdoptedStylesController, θaddThemingController as addThemingController, IgcIconComponent, } from 'igniteui-webcomponents';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { addA11y } from '../internal/a11y.js';
 import { MIN_COL_RESIZE_WIDTH, SORT_ICON_ASCENDING, SORT_ICON_DESCENDING, } from '../internal/constants.js';
 import { GRID_STATE_CONTEXT } from '../internal/context.js';
 import { partMap } from '../internal/part-map.js';
@@ -38,7 +39,9 @@ export default class IgcGridLiteHeader extends LitElement {
     constructor() {
         super();
         this._adoptedStylesController = addAdoptedStylesController(this);
+        this._a11y = addA11y(this, 'columnheader');
         this.adoptRootStyles = false;
+        this._colIndex = -1;
         this.#handleResize = ({ clientX }) => {
             const { left } = this.getBoundingClientRect();
             const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);
@@ -46,7 +49,6 @@ export default class IgcGridLiteHeader extends LitElement {
             this.resizeController.resize(this.column, width, x);
         };
         this.#handlePointerLost = () => {
-            this.resizeController.indicatorActive = false;
             this.removeEventListener('pointermove', this.#handleResize);
             this.resizeController.stop();
         };
@@ -55,21 +57,28 @@ export default class IgcGridLiteHeader extends LitElement {
             themeChange: this._handleThemeChange,
         });
     }
+    get _shouldAdoptStyles() {
+        return this.adoptRootStyles && this.column.headerTemplate != null;
+    }
     update(props) {
-        if (props.has('adoptRootStyles')) {
-            this._adoptedStylesController.shouldAdoptStyles(this.adoptRootStyles && this.column.headerTemplate != null);
+        if (props.has('adoptRootStyles') || props.has('column')) {
+            this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
         }
+        this._a11y.set({ ariaColIndex: `${this._colIndex}`, ariaSort: this.#ariaSort() });
         super.update(props);
     }
+    #ariaSort() {
+        if (!this.isSortable) {
+            return null;
+        }
+        return this.state.sorting.state.get(this.column.field)?.direction ?? 'none';
+    }
     _handleThemeChange() {
         this._adoptedStylesController.invalidateCache(this.ownerDocument);
-        this._adoptedStylesController.shouldAdoptStyles(this.adoptRootStyles && this.column.headerTemplate != null);
+        this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
     }
     #addResizeEventHandlers() {
         const config = { once: true };
-        this.addEventListener('gotpointercapture', () => {
-            this.resizeController.indicatorActive = true;
-        }, config);
         this.addEventListener('lostpointercapture', this.#handlePointerLost, config);
         this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);
         this.addEventListener('pointermove', this.#handleResize);
@@ -90,33 +99,30 @@ export default class IgcGridLiteHeader extends LitElement {
     #handleAutosize;
     renderSortPart() {
         const state = this.state.sorting.state.get(this.column.field);
-        const idx = Array.from(this.state.sorting.state.values()).indexOf(state);
-        const attr = this.state.host.sortingOptions.mode === 'multiple' ? (idx > -1 ? idx + 1 : nothing) : nothing;
-        const icon = state
-            ? state.direction === 'ascending'
-                ? SORT_ICON_ASCENDING
-                : SORT_ICON_DESCENDING
-            : SORT_ICON_ASCENDING;
-        return state || this.isSortable
-            ? html `<span
-          part=${partMap({ action: true, sorted: !!state?.direction })}
-          @click=${this.isSortable ? this.#handleClick : nothing}
-        >
-          <igc-icon
-            part=${partMap({ 'sorting-action': !!state })}
-            data-sortIndex=${attr}
-            name=${icon}
-            collection="internal"
-          ></igc-icon>
-        </span>`
-            : nothing;
+        if (!state && !this.isSortable) {
+            return nothing;
+        }
+        const position = Array.from(this.state.sorting.state.keys()).indexOf(this.column.field);
+        const multiple = this.state.host.sortingOptions.mode === 'multiple';
+        const icon = state?.direction === 'descending' ? SORT_ICON_DESCENDING : SORT_ICON_ASCENDING;
+        return html `<span
+      part=${partMap({ action: true, sorted: !!state?.direction })}
+      @click=${this.isSortable ? this.#handleClick : nothing}
+    >
+      <igc-icon
+        part=${partMap({ 'sorting-action': !!state })}
+        data-sortIndex=${multiple && position > -1 ? position + 1 : nothing}
+        name=${icon}
+        collection="internal"
+      ></igc-icon>
+    </span>`;
     }
     renderContentPart() {
         const defaultContent = this.column.header ?? this.column.field;
         const template = this.column.headerTemplate;
         return html `
       <span part="title">
-        <span>${template ? template(this.context) : html `${defaultContent}`}</span>
+        <span>${template ? template(this.context) : defaultContent}</span>
       </span>
     `;
     }
@@ -155,4 +161,7 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], IgcGridLiteHeader.prototype, "adoptRootStyles", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteHeader.prototype, "_colIndex", void 0);
 //# sourceMappingURL=header.js.map

package/components/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport {\n  θaddAdoptedStylesController as addAdoptedStylesController,\n  θaddThemingController as addThemingController,\n  IgcIconComponent,\n} from 'igniteui-webcomponents';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { StateController } from '../controllers/state.js';\nimport {\n  MIN_COL_RESIZE_WIDTH,\n  SORT_ICON_ASCENDING,\n  SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { partMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\nimport { all } from '../styles/themes/grid-header-themes.js';\n\nexport default class IgcGridLiteHeader<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteHeader, IgcIconComponent);\n  }\n\n  private readonly _adoptedStylesController = addAdoptedStylesController(this);\n\n  protected get context(): IgcHeaderContext<T> {\n    return {\n      parent: this,\n      column: this.column,\n    };\n  }\n\n  protected get isSortable() {\n    return Boolean(this.column.sortable);\n  }\n\n  protected get resizeController() {\n    return this.state.resizing;\n  }\n\n  @consume({ context: GRID_STATE_CONTEXT, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._handleThemeChange,\n    });\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('adoptRootStyles')) {\n      this._adoptedStylesController.shouldAdoptStyles(\n        this.adoptRootStyles && this.column.headerTemplate != null\n      );\n    }\n\n    super.update(props);\n  }\n\n  private _handleThemeChange() {\n    this._adoptedStylesController.invalidateCache(this.ownerDocument);\n    this._adoptedStylesController.shouldAdoptStyles(\n      this.adoptRootStyles && this.column.headerTemplate != null\n    );\n  }\n\n  #addResizeEventHandlers() {\n    const config: AddEventListenerOptions = { once: true };\n\n    this.addEventListener(\n      'gotpointercapture',\n      () => {\n        this.resizeController.indicatorActive = true;\n      },\n      config\n    );\n    this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n    this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n    this.addEventListener('pointermove', this.#handleResize);\n  }\n\n  #handleClick(e: Event) {\n    e.stopPropagation();\n    this.state.sorting.sortFromHeaderClick(this.column);\n  }\n\n  #handleResize = ({ clientX }: PointerEvent) => {\n    const { left } = this.getBoundingClientRect();\n    const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n    const x = this.offsetLeft + width;\n\n    this.resizeController.resize(this.column, width, x);\n  };\n\n  #handleResizeStart(ev: PointerEvent) {\n    const { target, pointerId } = ev;\n\n    ev.preventDefault();\n\n    this.#addResizeEventHandlers();\n    this.resizeController.start(this);\n\n    (target as HTMLElement).setPointerCapture(pointerId);\n  }\n\n  #handlePointerLost = () => {\n    this.resizeController.indicatorActive = false;\n    this.removeEventListener('pointermove', this.#handleResize);\n    this.resizeController.stop();\n  };\n\n  #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n  protected renderSortPart() {\n    const state = this.state.sorting.state.get(this.column.field);\n    const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n    const attr =\n      this.state.host.sortingOptions.mode === 'multiple' ? (idx > -1 ? idx + 1 : nothing) : nothing;\n    const icon = state\n      ? state.direction === 'ascending'\n        ? SORT_ICON_ASCENDING\n        : SORT_ICON_DESCENDING\n      : SORT_ICON_ASCENDING;\n\n    return state || this.isSortable\n      ? html`<span\n          part=${partMap({ action: true, sorted: !!state?.direction })}\n          @click=${this.isSortable ? this.#handleClick : nothing}\n        >\n          <igc-icon\n            part=${partMap({ 'sorting-action': !!state })}\n            data-sortIndex=${attr}\n            name=${icon}\n            collection=\"internal\"\n          ></igc-icon>\n        </span>`\n      : nothing;\n  }\n\n  protected renderContentPart() {\n    const defaultContent = this.column.header ?? this.column.field;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partMap({\n          content: true,\n          sortable: this.isSortable,\n          resizing: this.resizeController.indicatorActive,\n        })}\n      >\n        ${this.renderContentPart()}\n        <div part=\"actions\">${this.renderSortPart()}</div>\n      </div>\n      ${this.renderResizePart()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;\n  }\n}\n"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EACL,2BAA2B,IAAI,0BAA0B,EACzD,qBAAqB,IAAI,oBAAoB,EAC7C,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,wCAAwC,CAAC;AAE7D,MAAM,CAAC,OAAO,OAAO,iBAAoC,SAAQ,UAAU;IAClE,MAAM,KAAK,OAAO;QACvB,OAAO,eAAe,CAAC;IACzB,CAAC;aAEsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACzD,CAAC;IAKD,IAAc,OAAO;QACnB,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;IACJ,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED,IAAc,gBAAgB;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;IAqBD;QACE,KAAK,EAAE,CAAC;QAtCO,6BAAwB,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;QAC5D,UAAK,GAAG,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QAyBhD,oBAAe,GAAG,KAAK,CAAC;QASxB,cAAS,GAAG,CAAC,CAAC,CAAC;QAqDtB,kBAAa,GAAG,CAAC,EAAE,OAAO,EAAgB,EAAE,EAAE;YAC5C,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,oBAAoB,CAAC,CAAC;YAC7D,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YAElC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACtD,CAAC,CAAC;QAaF,uBAAkB,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAC5D,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAxExE,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9B,WAAW,EAAE,IAAI,CAAC,kBAAkB;SACrC,CAAC,CAAC;IACL,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,IAAI,CAAC;IACpE,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,IAAI,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC3E,CAAC;QAID,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAElF,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAGD,SAAS;QACP,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC;IAC9E,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAClE,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3E,CAAC;IAED,uBAAuB;QACrB,MAAM,MAAM,GAA4B,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAEvD,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;QAC7E,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;QAC3F,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3D,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC;IAED,aAAa,CAMX;IAEF,kBAAkB,CAAC,EAAgB;QACjC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;QAEjC,EAAE,CAAC,cAAc,EAAE,CAAC;QAEpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAsB,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC;IAED,kBAAkB,CAGhB;IAEF,eAAe,CAA2D;IAEhE,cAAc;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE9D,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAC/B,OAAO,OAAO,CAAC;QACjB,CAAC;QAGD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,KAAK,UAAU,CAAC;QACpE,MAAM,IAAI,GAAG,KAAK,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,mBAAmB,CAAC;QAE5F,OAAO,IAAI,CAAA;aACF,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC;eACnD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;;;eAG7C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;yBAC5B,QAAQ,IAAI,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO;eAC5D,IAAI;;;YAGP,CAAC;IACX,CAAC;IAES,iBAAiB;QACzB,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc;;KAE7D,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS;YAC1B,CAAC,CAAC,IAAI,CAAA;;sBAEU,IAAI,CAAC,eAAe;yBACjB,IAAI,CAAC,kBAAkB;iBAC/B;YACX,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC;YACb,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,UAAU;YACzB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,eAAe;SAChD,CAAC;;UAEA,IAAI,CAAC,iBAAiB,EAAE;8BACJ,IAAI,CAAC,cAAc,EAAE;;QAE3C,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;IACJ,CAAC;;AA1JM;IAFN,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACQ;AAGhC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DACA;AASxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACT","sourcesContent":["import { consume } from '@lit/context';\nimport {\n  θaddAdoptedStylesController as addAdoptedStylesController,\n  θaddThemingController as addThemingController,\n  IgcIconComponent,\n} from 'igniteui-webcomponents';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { StateController } from '../controllers/state.js';\nimport { addA11y } from '../internal/a11y.js';\nimport {\n  MIN_COL_RESIZE_WIDTH,\n  SORT_ICON_ASCENDING,\n  SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { partMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\nimport { all } from '../styles/themes/grid-header-themes.js';\n\nexport default class IgcGridLiteHeader<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteHeader, IgcIconComponent);\n  }\n\n  private readonly _adoptedStylesController = addAdoptedStylesController(this);\n  private readonly _a11y = addA11y(this, 'columnheader');\n\n  protected get context(): IgcHeaderContext<T> {\n    return {\n      parent: this,\n      column: this.column,\n    };\n  }\n\n  protected get isSortable() {\n    return Boolean(this.column.sortable);\n  }\n\n  protected get resizeController() {\n    return this.state.resizing;\n  }\n\n  @consume({ context: GRID_STATE_CONTEXT, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  /**\n   * Position of the header among the visible columns. Written as its 1-based\n   * `aria-colindex`.\n   *\n   * @internal\n   */\n  @property({ attribute: false })\n  public _colIndex = -1;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._handleThemeChange,\n    });\n  }\n\n  private get _shouldAdoptStyles(): boolean {\n    return this.adoptRootStyles && this.column.headerTemplate != null;\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('adoptRootStyles') || props.has('column')) {\n      this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n    }\n\n    // Sort state reaches the header as a context ping, not a property change, so\n    // the ARIA state is resolved on each update instead of dirty-checked.\n    this._a11y.set({ ariaColIndex: `${this._colIndex}`, ariaSort: this.#ariaSort() });\n\n    super.update(props);\n  }\n\n  /** `aria-sort` applies only to a sortable header. */\n  #ariaSort(): string | null {\n    if (!this.isSortable) {\n      return null;\n    }\n\n    return this.state.sorting.state.get(this.column.field)?.direction ?? 'none';\n  }\n\n  private _handleThemeChange() {\n    this._adoptedStylesController.invalidateCache(this.ownerDocument);\n    this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n  }\n\n  #addResizeEventHandlers() {\n    const config: AddEventListenerOptions = { once: true };\n\n    this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n    this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n    this.addEventListener('pointermove', this.#handleResize);\n  }\n\n  #handleClick(e: Event) {\n    e.stopPropagation();\n    this.state.sorting.sortFromHeaderClick(this.column);\n  }\n\n  #handleResize = ({ clientX }: PointerEvent) => {\n    const { left } = this.getBoundingClientRect();\n    const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n    const x = this.offsetLeft + width;\n\n    this.resizeController.resize(this.column, width, x);\n  };\n\n  #handleResizeStart(ev: PointerEvent) {\n    const { target, pointerId } = ev;\n\n    ev.preventDefault();\n\n    this.#addResizeEventHandlers();\n    this.resizeController.start(this);\n\n    (target as HTMLElement).setPointerCapture(pointerId);\n  }\n\n  #handlePointerLost = () => {\n    this.removeEventListener('pointermove', this.#handleResize);\n    this.resizeController.stop();\n  };\n\n  #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n  protected renderSortPart() {\n    const state = this.state.sorting.state.get(this.column.field);\n\n    if (!state && !this.isSortable) {\n      return nothing;\n    }\n\n    // Column position in the multi-sort order.\n    const position = Array.from(this.state.sorting.state.keys()).indexOf(this.column.field);\n    const multiple = this.state.host.sortingOptions.mode === 'multiple';\n    const icon = state?.direction === 'descending' ? SORT_ICON_DESCENDING : SORT_ICON_ASCENDING;\n\n    return html`<span\n      part=${partMap({ action: true, sorted: !!state?.direction })}\n      @click=${this.isSortable ? this.#handleClick : nothing}\n    >\n      <igc-icon\n        part=${partMap({ 'sorting-action': !!state })}\n        data-sortIndex=${multiple && position > -1 ? position + 1 : nothing}\n        name=${icon}\n        collection=\"internal\"\n      ></igc-icon>\n    </span>`;\n  }\n\n  protected renderContentPart() {\n    const defaultContent = this.column.header ?? this.column.field;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : defaultContent}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partMap({\n          content: true,\n          sortable: this.isSortable,\n          resizing: this.resizeController.indicatorActive,\n        })}\n      >\n        ${this.renderContentPart()}\n        <div part=\"actions\">${this.renderSortPart()}</div>\n      </div>\n      ${this.renderResizePart()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;\n  }\n}\n"]}

package/components/row.d.ts

@@ -1,19 +1,19 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
 import IgcGridLiteCell from './cell.js';
-/**
- * Component representing the DOM row in the IgcGridLite.
- */
 export default class IgcGridLiteRow<T extends object> extends LitElement {
     static get tagName(): "igc-grid-lite-row";
     static styles: import("lit").CSSResult;
     static register(): void;
+    private readonly _a11y;
     adoptRootStyles: boolean;
     data?: T;
     columns: Array<ColumnConfiguration<T>>;
     activeNode?: ActiveNode<T>;
     index: number;
     get cells(): IgcGridLiteCell<T>[];
+    protected update(props: PropertyValues<this>): void;
+    protected updated(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/row.js

@@ -7,14 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { addA11y, headerRowsFor } from '../internal/a11y.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
-import { resolveFieldValue } from '../internal/utils.js';
+import { resolveFieldValue, visibleColumns } from '../internal/utils.js';
 import { styles } from '../styles/body-row/body-row.css.js';
 import IgcGridLiteCell from './cell.js';
+const ACTIVE_ROW_Z_INDEX = '3';
 export default class IgcGridLiteRow extends LitElement {
     constructor() {
         super(...arguments);
+        this._a11y = addA11y(this, 'row');
         this.adoptRootStyles = false;
         this.columns = [];
         this.index = -1;
@@ -29,14 +32,22 @@ export default class IgcGridLiteRow extends LitElement {
     get cells() {
         return Array.from(this.renderRoot.querySelectorAll(IgcGridLiteCell.tagName));
     }
+    update(props) {
+        this._a11y.set({ ariaRowIndex: `${this.index + headerRowsFor(this.columns) + 1}` });
+        super.update(props);
+    }
+    updated() {
+        this.style.zIndex = this.activeNode?.row === this.index ? ACTIVE_ROW_Z_INDEX : '';
+    }
     render() {
         const { column: key, row: index } = this.activeNode ?? {};
         const data = this.data ?? {};
-        const columns = this.columns.filter((column) => !column.hidden);
+        const columns = visibleColumns(this.columns);
         return html `
-      ${repeat(columns, (column) => column, (column) => html `
+      ${repeat(columns, (column) => column.field, (column, colIndex) => html `
           <igc-grid-lite-cell
             part="cell"
+            ._colIndex=${colIndex + 1}
             .adoptRootStyles=${this.adoptRootStyles}
             .active=${key === column.field && index === this.index}
             .column=${column}
@@ -62,6 +73,6 @@ __decorate([
     property({ attribute: false })
 ], IgcGridLiteRow.prototype, "activeNode", void 0);
 __decorate([
-    property({ type: Number, attribute: false })
+    property({ attribute: false })
 ], IgcGridLiteRow.prototype, "index", void 0);
 //# sourceMappingURL=row.js.map

package/components/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/components/row.ts"],"names":[],"mappings":";;;;;;AAAA,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;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,eAAe,MAAM,WAAW,CAAC;AAKxC,MAAM,CAAC,OAAO,OAAO,cAAiC,SAAQ,UAAU;IAAxE;;QAWS,oBAAe,GAAG,KAAK,CAAC;QAMxB,YAAO,GAAkC,EAAE,CAAC;QAM5C,UAAK,GAAG,CAAC,CAAC,CAAC;IAiCpB,CAAC;IAvDQ,MAAM,KAAK,OAAO;QACvB,OAAO,YAAY,CAAC;IACtB,CAAC;aACsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACrD,CAAC;IAiBD,IAAW,KAAK;QACd,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAqB,eAAe,CAAC,OAAO,CAAC,CAC9E,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAK,EAAQ,CAAC;QAEpC,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;;;+BAGO,IAAI,CAAC,eAAe;sBAC7B,GAAG,KAAK,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;sBAC5C,MAAM;4BACA,MAAM,CAAC,YAAY;mBAC5B,IAAyB;wBACpB,IAAI,CAAC,KAAK;qBACb,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC;;SAEjD,CACF;KACF,CAAC;IACJ,CAAC;;AA5CM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDACA;AAGxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACf;AAGT;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACoB;AAG5C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAC3B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration } from '../internal/types.js';\nimport { resolveFieldValue } from '../internal/utils.js';\nimport { styles } from '../styles/body-row/body-row.css.js';\nimport IgcGridLiteCell from './cell.js';\n\n/**\n * Component representing the DOM row in the IgcGridLite.\n */\nexport default class IgcGridLiteRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteRow, IgcGridLiteCell);\n  }\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  @property({ attribute: false })\n  public data?: T;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  @property({ attribute: false })\n  public activeNode?: ActiveNode<T>;\n\n  @property({ type: Number, attribute: false })\n  public index = -1;\n\n  public get cells(): IgcGridLiteCell<T>[] {\n    return Array.from(\n      this.renderRoot.querySelectorAll<IgcGridLiteCell<T>>(IgcGridLiteCell.tagName)\n    );\n  }\n\n  protected override render() {\n    const { column: key, row: index } = this.activeNode ?? {};\n    const data = this.data ?? ({} as T);\n\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-cell\n            part=\"cell\"\n            .adoptRootStyles=${this.adoptRootStyles}\n            .active=${key === column.field && index === this.index}\n            .column=${column}\n            .cellTemplate=${column.cellTemplate}\n            .row=${this as IgcGridLiteRow<T>}\n            .rowIndex=${this.index}\n            .value=${resolveFieldValue(data, column.field)}\n          ></igc-grid-lite-cell>\n        `\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;\n  }\n}\n"]}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/components/row.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { addA11y, headerRowsFor } from '../internal/a11y.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration } from '../internal/types.js';\nimport { resolveFieldValue, visibleColumns } from '../internal/utils.js';\nimport { styles } from '../styles/body-row/body-row.css.js';\nimport IgcGridLiteCell from './cell.js';\n\nconst ACTIVE_ROW_Z_INDEX = '3';\n\nexport default class IgcGridLiteRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteRow, IgcGridLiteCell);\n  }\n\n  private readonly _a11y = addA11y(this, 'row');\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  @property({ attribute: false })\n  public data?: T;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  @property({ attribute: false })\n  public activeNode?: ActiveNode<T>;\n\n  @property({ attribute: false })\n  public index = -1;\n\n  public get cells(): IgcGridLiteCell<T>[] {\n    return Array.from(\n      this.renderRoot.querySelectorAll<IgcGridLiteCell<T>>(IgcGridLiteCell.tagName)\n    );\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    // Data rows come after the header rows in the 1-based row index space.\n    this._a11y.set({ ariaRowIndex: `${this.index + headerRowsFor(this.columns) + 1}` });\n\n    super.update(props);\n  }\n\n  protected override updated(): void {\n    // The active row paints above its neighbors so that the focus outline is not\n    // clipped. Set after commit: the first render writes the full style attribute.\n    this.style.zIndex = this.activeNode?.row === this.index ? ACTIVE_ROW_Z_INDEX : '';\n  }\n\n  protected override render() {\n    const { column: key, row: index } = this.activeNode ?? {};\n    const data = this.data ?? ({} as T);\n\n    const columns = visibleColumns(this.columns);\n\n    return html`\n      ${repeat(\n        columns,\n        (column) => column.field,\n        (column, colIndex) => html`\n          <igc-grid-lite-cell\n            part=\"cell\"\n            ._colIndex=${colIndex + 1}\n            .adoptRootStyles=${this.adoptRootStyles}\n            .active=${key === column.field && index === this.index}\n            .column=${column}\n            .cellTemplate=${column.cellTemplate}\n            .row=${this}\n            .rowIndex=${this.index}\n            .value=${resolveFieldValue(data, column.field)}\n          ></igc-grid-lite-cell>\n        `\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;\n  }\n}\n"]}

package/controllers/data-operation.d.ts

@@ -1,18 +1,12 @@
-import type { ReactiveController } from 'lit';
 import type { GridHost } from '../internal/types.js';
 import FilterDataOperation from '../operations/filter.js';
 import SortDataOperation from '../operations/sort.js';
 import type { StateController } from './state.js';
-declare class DataOperationsController<T extends object> implements ReactiveController {
+declare class DataOperationsController<T extends object> {
     protected host: GridHost<T>;
     protected sorting: SortDataOperation<T>;
     protected filtering: FilterDataOperation<T>;
     constructor(host: GridHost<T>);
-    hostConnected(): void;
-    protected get hasCustomSort(): boolean;
-    protected get hasCustomFilter(): boolean;
-    protected get customFilter(): import("../index.js").DataPipelineHook<T>;
-    protected get customSort(): import("../index.js").DataPipelineHook<T>;
     apply(data: T[], state: StateController<T>): Promise<T[]>;
 }
 declare function createDataOperationsController<T extends object>(host: GridHost<T>): DataOperationsController<T>;

package/controllers/data-operation.js

@@ -1,4 +1,3 @@
-import { isDefined } from '../internal/is-defined.js';
 import FilterDataOperation from '../operations/filter.js';
 import SortDataOperation from '../operations/sort.js';
 class DataOperationsController {
@@ -6,31 +5,15 @@ class DataOperationsController {
         this.host = host;
         this.sorting = new SortDataOperation();
         this.filtering = new FilterDataOperation();
-        this.host.addController(this);
-    }
-    hostConnected() { }
-    get hasCustomSort() {
-        return isDefined(this.host.dataPipelineConfiguration?.sort);
-    }
-    get hasCustomFilter() {
-        return isDefined(this.host.dataPipelineConfiguration?.filter);
-    }
-    get customFilter() {
-        return this.host.dataPipelineConfiguration.filter;
-    }
-    get customSort() {
-        return this.host.dataPipelineConfiguration.sort;
     }
     async apply(data, state) {
-        const { filtering, sorting } = state;
-        let transformed;
-        transformed = this.hasCustomFilter
-            ? await this.customFilter({ data, grid: this.host, type: 'filter' })
-            : this.filtering.apply(data, filtering.state);
-        transformed = this.hasCustomSort
-            ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })
-            : this.sorting.apply(transformed, sorting.state);
-        return transformed;
+        const { filter, sort } = this.host.dataPipelineConfiguration ?? {};
+        const filtered = filter
+            ? await filter({ data, grid: this.host, type: 'filter' })
+            : this.filtering.apply(data, state.filtering.state);
+        return sort
+            ? await sort({ data: filtered, grid: this.host, type: 'sort' })
+            : this.sorting.apply(filtered, state.sorting.state);
     }
 }
 function createDataOperationsController(host) {