igniteui-grid-lite 0.0.1 → 0.1.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 {\n  IgcButtonComponent,\n  IgcChipComponent,\n  IgcDropdownComponent,\n  IgcInputComponent,\n} from 'igniteui-webcomponents';\nimport { html, nothing } from 'lit';\nimport { eventOptions, property, query, queryAll, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { DataOperationsController } from '../controllers/data-operation.js';\nimport { GridDOMController } from '../controllers/dom.js';\nimport { gridStateContext, StateController } from '../controllers/state.js';\nimport { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';\nimport { EventEmitterBase } from '../internal/mixins/event-emitter.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_TAG } from '../internal/tags.js';\nimport { addThemingController } from '../internal/theming.js';\nimport type {\n  ColumnConfiguration,\n  DataPipelineConfiguration,\n  GridSortConfiguration,\n  Keys,\n} from '../internal/types.js';\nimport { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\nimport type { SortExpression } from '../operations/sort/types.js';\nimport { styles } from '../styles/grid/themes/grid.base.css.js';\nimport { all } from '../styles/grid/themes/themes.js';\nimport IgcGridLiteCell from './cell.js';\nimport IgcFilterRow from './filter-row.js';\nimport IgcGridLiteHeaderRow from './header-row.js';\nimport IgcGridLiteRow from './row.js';\nimport IgcVirtualizer from './virtualizer.js';\n\n/**\n * Event object for the filtering event of the grid.\n */\nexport interface IgcFilteringEvent<T extends object> {\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> {\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> {\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<SortExpression<T>>;\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<SortExpression<T>>;\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> extends EventEmitterBase<IgcGridLiteEventMap<T>> {\n  public static get tagName() {\n    return GRID_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(\n      IgcGridLite,\n      IgcVirtualizer,\n      IgcGridLiteRow,\n      IgcGridLiteHeaderRow,\n      IgcFilterRow,\n      IgcButtonComponent,\n      IgcChipComponent,\n      IgcInputComponent,\n      IgcDropdownComponent\n    );\n  }\n\n  protected stateController = new StateController<T>(this);\n  protected DOM = new GridDOMController<T>(this, this.stateController);\n  protected dataController = new DataOperationsController<T>(this);\n\n  protected stateProvider = new ContextProvider(this, {\n    context: gridStateContext,\n    initialValue: this.stateController,\n  });\n\n  @query(IgcVirtualizer.tagName)\n  protected scrollContainer!: IgcVirtualizer;\n\n  @query(IgcGridLiteHeaderRow.tagName)\n  protected headerRow!: IgcGridLiteHeaderRow<T>;\n\n  @query(IgcFilterRow.tagName)\n  protected filterRow!: IgcFilterRow<T>;\n\n  @state()\n  protected dataState: Array<T> = [];\n\n  @queryAll(IgcGridLiteRow.tagName)\n  protected _rows!: NodeListOf<IgcGridLiteRow<T>>;\n\n  /** Column configuration for the grid. */\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  /** The data source for the grid. */\n  @property({ attribute: false })\n  public data: Array<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 sortConfiguration: GridSortConfiguration = {\n    multiple: true,\n    triState: true,\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 sortExpressions(expressions: SortExpression<T>[]) {\n    if (expressions.length) {\n      this.sort(expressions);\n    }\n  }\n\n  /**\n   * Get the sort state for the grid.\n   */\n  @property({ attribute: false })\n  public get sortExpressions(): SortExpression<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    if (expressions.length) {\n      this.filter(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    const expressions: FilterExpression<T>[] = [];\n\n    for (const each of this.stateController.filtering.state.values) {\n      expressions.push(...each.all);\n    }\n\n    return expressions;\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 Array.from(this._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() {\n    return this.dataState.length;\n  }\n\n  @watch('columns')\n  protected watchColumns(_: ColumnConfiguration<T>[], newConfig: ColumnConfiguration<T>[] = []) {\n    this.columns = newConfig.map((config) => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));\n  }\n\n  @watch('data')\n  protected dataChanged() {\n    this.dataState = structuredClone(this.data);\n    autoGenerateColumns(this);\n\n    if (this.hasUpdated) {\n      this.pipeline();\n    }\n  }\n\n  @watch(PIPELINE)\n  protected async pipeline() {\n    this.dataState = await this.dataController.apply(\n      structuredClone(this.data),\n      this.stateController\n    );\n  }\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\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>[]) {\n    this.stateController.filtering.filter(\n      asArray(config).map((each) =>\n        typeof each.condition === 'string'\n          ? // XXX: Types\n            Object.assign(each, {\n              condition: (getFilterOperandsFor(this.getColumn(each.key)!) as any)[each.condition],\n            })\n          : each\n      )\n    );\n  }\n\n  /**\n   * Performs a sort operation in the grid based on the passed expression(s).\n   */\n  public sort(expressions: SortExpression<T> | SortExpression<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>) {\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>) {\n    this.stateController.filtering.reset(key);\n    this.requestUpdate(PIPELINE);\n  }\n\n  /**\n   * Returns a {@link ColumnConfiguration} for a given column.\n   */\n  public getColumn(id: Keys<T> | number) {\n    return typeof id === 'number'\n      ? this.columns.at(id)\n      : this.columns.find(({ key }) => key === id);\n  }\n\n  /**\n   * Updates the column configuration of the grid.\n   */\n  public updateColumns(columns: ColumnConfiguration<T> | ColumnConfiguration<T>[]) {\n    for (const column of asArray(columns)) {\n      const instance = this.columns.find((curr) => curr.key === column.key);\n      if (instance) {\n        Object.assign(instance, column);\n      }\n    }\n\n    this.requestUpdate(PIPELINE);\n  }\n\n  @eventOptions({ capture: true })\n  protected bodyClickHandler(event: MouseEvent) {\n    const target = event\n      .composedPath()\n      .find((el) => el instanceof IgcGridLiteCell) as IgcGridLiteCell<T>;\n    if (target) {\n      this.stateController.active = {\n        column: target.column.key,\n        row: target.row.index,\n      };\n    }\n  }\n\n  protected bodyKeydownHandler(event: KeyboardEvent) {\n    if (this.scrollContainer.isSameNode(event.target as HTMLElement)) {\n      this.stateController.navigation.navigate(event);\n    }\n  }\n\n  protected renderHeaderRow() {\n    return html`\n      <igc-grid-lite-header-row\n      style=${styleMap(this.DOM.columnSizes)}\n      .columns=${this.columns}\n      ></igc-grid-lite-header-row>\n    `;\n  }\n\n  protected renderBody() {\n    return html`\n      <igc-virtualizer\n        .items=${this.dataState}\n        .renderItem=${this.DOM.rowRenderer}\n        @click=${this.bodyClickHandler}\n        @keydown=${this.bodyKeydownHandler}\n      ></igc-virtualizer>\n    `;\n  }\n\n  protected renderFilterRow() {\n    return this.columns.some((column) => column.filter)\n      ? html`<igc-filter-row style=${styleMap(this.DOM.columnSizes)}></igc-filter-row>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      ${this.stateController.resizing.renderIndicator()}\n      ${this.renderHeaderRow()}\n      ${this.renderFilterRow()}\n      ${this.renderBody()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLite.tagName]: IgcGridLite<object>;\n  }\n}\n"]}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/components/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport {\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 { addThemingController } from '../internal/theming.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 } from '../styles/themes/grid.base.css.js';\nimport { all } from '../styles/themes/grid-themes.js';\nimport { styles as shared } from '../styles/themes/shared/grid.common.css.js';\nimport IgcGridLiteCell from './cell.js';\nimport { IgcGridLiteColumn } from './column.js';\nimport IgcFilterRow from './filter-row.js';\nimport IgcGridLiteHeaderRow from './header-row.js';\nimport IgcGridLiteRow from './row.js';\nimport IgcVirtualizer from './virtualizer.js';\n\n/**\n * Event object for the filtering event of the grid.\n */\nexport interface IgcFilteringEvent<T extends object> {\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> {\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> {\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>>;\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>>;\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> extends EventEmitterBase<IgcGridLiteEventMap<T>> {\n  public static get tagName() {\n    return GRID_TAG;\n  }\n\n  public static override styles = [styles, 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 _initialSortExpressions: SortingExpression<T>[] = [];\n  private _initialFilterExpressions: FilterExpression<T>[] = [];\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  /** 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    if (this.hasUpdated && expressions.length) {\n      this.sort(expressions);\n    } else {\n      this._initialSortExpressions = expressions;\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    if (this.hasUpdated && expressions.length) {\n      this.filter(expressions);\n    } else {\n      this._initialFilterExpressions = 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      if (this._initialFilterExpressions.length) {\n        this.filter(this._initialFilterExpressions);\n      }\n\n      if (this._initialSortExpressions.length) {\n        this.sort(this._initialSortExpressions);\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      .filter((element) => element.matches(IgcGridLiteColumn.tagName));\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      .filter((element) => element.matches(IgcGridLiteColumn.tagName));\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    this._stateController.filtering.filter(\n      asArray(config).map((each) =>\n        isString(each.condition)\n          ? Object.assign(each, {\n              condition: (getFilterOperandsFor(this.getColumn(each.key)!) as any)[each.condition],\n            })\n          : each\n      )\n    );\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   * 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.key === id\n    );\n  }\n\n  /**\n   * Updates the column configuration of the grid.\n   */\n  public updateColumns(columns: ColumnConfiguration<T> | ColumnConfiguration<T>[]): void {\n    this._stateController.updateColumnsConfiguration(asArray(columns));\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.key, 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        .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        .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.filter)\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<object>;\n  }\n}\n"]}

package/components/header-row.d.ts

@@ -1,19 +1,16 @@
-import { LitElement, type PropertyValueMap } from 'lit';
-import { type StateController } from '../controllers/state.js';
+import { LitElement, type PropertyValues } from 'lit';
 import type { ColumnConfiguration } from '../internal/types.js';
 import IgcGridLiteHeader from './header.js';
 export default class IgcGridLiteHeaderRow<T extends object> extends LitElement {
-    #private;
     static get tagName(): "igc-grid-lite-header-row";
     static styles: import("lit").CSSResult;
     static register(): void;
-    protected _headers: NodeListOf<IgcGridLiteHeader<T>>;
-    state: StateController<T>;
-    columns: Array<ColumnConfiguration<T>>;
+    private readonly _state?;
+    columns: ColumnConfiguration<T>[];
     get headers(): IgcGridLiteHeader<T>[];
     constructor();
-    connectedCallback(): void;
-    protected shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, this>): boolean;
+    private _setActiveFilterColumn;
+    protected shouldUpdate(props: PropertyValues<this>): boolean;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/header-row.js

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { consume } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAll } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
-import { gridStateContext } from '../controllers/state.js';
-import { partNameMap } from '../internal/part-map.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 { styles } from '../styles/header-row/header-row.base.css.js';
@@ -23,23 +24,16 @@ export default class IgcGridLiteHeaderRow extends LitElement {
         registerComponent(IgcGridLiteHeaderRow, IgcGridLiteHeader);
     }
     get headers() {
-        return Array.from(this._headers);
+        return Array.from(this.renderRoot.querySelectorAll(IgcGridLiteHeader.tagName));
     }
     constructor() {
         super();
         this.columns = [];
-        this.addEventListener('click', this.#activeFilterColumn);
+        this.addEventListener('click', this._setActiveFilterColumn);
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('tabindex', '0');
-    }
-    #activeFilterColumn(event) {
-        const header = event
-            .composedPath()
-            .filter((target) => target instanceof IgcGridLiteHeader)
-            .at(0);
-        this.state.filtering.setActiveColumn(header?.column);
+    _setActiveFilterColumn(event) {
+        const header = getElementFromEventPath(IgcGridLiteHeader.tagName, event);
+        this._state?.filtering.setActiveColumn(header?.column);
     }
     shouldUpdate(props) {
         for (const header of this.headers) {
@@ -48,24 +42,20 @@ export default class IgcGridLiteHeaderRow extends LitElement {
         return super.shouldUpdate(props);
     }
     render() {
-        const filterRow = this.state.filtering.filterRow;
+        const filterRow = this._state?.filtering.filterRow;
         return html `${map(this.columns, (column) => column.hidden
             ? nothing
-            : html `<igc-grid-lite-header
-            part=${partNameMap({
-                filtered: column === filterRow?.column,
-            })}
-            .column=${column}
-          ></igc-grid-lite-header>`)}`;
+            : html `
+            <igc-grid-lite-header
+              part=${partMap({ filtered: column.key === filterRow?.column?.key })}
+              .column=${column}
+            ></igc-grid-lite-header>
+          `)}`;
     }
 }
 __decorate([
-    queryAll(IgcGridLiteHeader.tagName)
-], IgcGridLiteHeaderRow.prototype, "_headers", void 0);
-__decorate([
-    consume({ context: gridStateContext, subscribe: true }),
-    property({ attribute: false })
-], IgcGridLiteHeaderRow.prototype, "state", void 0);
+    consume({ context: GRID_STATE_CONTEXT, subscribe: true })
+], IgcGridLiteHeaderRow.prototype, "_state", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcGridLiteHeaderRow.prototype, "columns", void 0);

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,EAAE,OAAO,EAAyB,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAwB,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,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;IAYD,IAAW,OAAO;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAPH,YAAO,GAAkC,EAAE,CAAC;QAQjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC3D,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;IAED,mBAAmB,CAAC,KAAiB;QACnC,MAAM,MAAM,GAAG,KAAK;aACjB,YAAY,EAAE;aACd,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,YAAY,iBAAiB,CAAC;aACvD,EAAE,CAAC,CAAC,CAAyB,CAAC;QAEjC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvD,CAAC;IAEkB,YAAY,CAAC,KAAsD;QACpF,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,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QAEjD,OAAO,IAAI,CAAA,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CACzC,MAAM,CAAC,MAAM;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;mBACK,WAAW,CAAC;gBACjB,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,MAAM;aACvC,CAAC;sBACQ,MAAM;mCACO,CAC9B,EAAE,CAAC;IACN,CAAC;;AArDS;IADT,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC;sDACkB;AAI/C;IAFN,OAAO,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACvD,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;mDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDACoB","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValueMap } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { partNameMap } 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  @queryAll(IgcGridLiteHeader.tagName)\n  protected _headers!: NodeListOf<IgcGridLiteHeader<T>>;\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  public get headers() {\n    return Array.from(this._headers);\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.#activeFilterColumn);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('tabindex', '0');\n  }\n\n  #activeFilterColumn(event: MouseEvent) {\n    const header = event\n      .composedPath()\n      .filter((target) => target instanceof IgcGridLiteHeader)\n      .at(0) as IgcGridLiteHeader<T>;\n\n    this.state.filtering.setActiveColumn(header?.column);\n  }\n\n  protected override shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, 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\n    return html`${map(this.columns, (column) =>\n      column.hidden\n        ? nothing\n        : html`<igc-grid-lite-header\n            part=${partNameMap({\n              filtered: column === filterRow?.column,\n            })}\n            .column=${column}\n          ></igc-grid-lite-header>`\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,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,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;IAQD,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;QATH,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;QAEnD,OAAO,IAAI,CAAA,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CACzC,MAAM,CAAC,MAAM;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;qBAEO,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,KAAK,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;wBACzD,MAAM;;WAEnB,CACN,EAAE,CAAC;IACN,CAAC;;AA1CgB;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;oDACb;AAGtC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDACe","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.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 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\n    return html`${map(this.columns, (column) =>\n      column.hidden\n        ? nothing\n        : html`\n            <igc-grid-lite-header\n              part=${partMap({ filtered: column.key === filterRow?.column?.key })}\n              .column=${column}\n            ></igc-grid-lite-header>\n          `\n    )}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeaderRow.tagName]: IgcGridLiteHeaderRow<object>;\n  }\n}\n"]}

package/components/header.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import { type StateController } from '../controllers/state.js';
+import type { StateController } from '../controllers/state.js';
 import type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';
 export default class IgcGridLiteHeader<T extends object> extends LitElement {
     #private;
@@ -11,6 +11,7 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
     protected get resizeController(): import("../controllers/resize.js").ResizeController<T>;
     state: StateController<T>;
     column: ColumnConfiguration<T>;
+    constructor();
     protected renderSortPart(): typeof nothing | import("lit-html").TemplateResult<1>;
     protected renderContentPart(): import("lit-html").TemplateResult<1>;
     protected renderResizePart(): typeof nothing | import("lit-html").TemplateResult<1>;

package/components/header.js

@@ -8,12 +8,14 @@ import { consume } from '@lit/context';
 import { IgcIconComponent } from 'igniteui-webcomponents';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { gridStateContext } from '../controllers/state.js';
 import { MIN_COL_RESIZE_WIDTH, SORT_ICON_ASCENDING, SORT_ICON_DESCENDING, } from '../internal/constants.js';
-import { partNameMap } from '../internal/part-map.js';
+import { GRID_STATE_CONTEXT } from '../internal/context.js';
+import { partMap } from '../internal/part-map.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_HEADER_TAG } from '../internal/tags.js';
+import { addThemingController } from '../internal/theming.js';
 import { styles } from '../styles/header-cell/header-cell.css.js';
+import { all } from '../styles/themes/grid-header-themes.js';
 export default class IgcGridLiteHeader extends LitElement {
     static get tagName() {
         return GRID_HEADER_TAG;
@@ -34,6 +36,10 @@ export default class IgcGridLiteHeader extends LitElement {
     get resizeController() {
         return this.state.resizing;
     }
+    constructor() {
+        super();
+        addThemingController(this, all);
+    }
     #addResizeEventHandlers() {
         const config = { once: true };
         this.addEventListener('gotpointercapture', () => {
@@ -69,11 +75,7 @@ export default class IgcGridLiteHeader extends LitElement {
     renderSortPart() {
         const state = this.state.sorting.state.get(this.column.key);
         const idx = Array.from(this.state.sorting.state.values()).indexOf(state);
-        const attr = this.state.host.sortConfiguration.multiple
-            ? idx > -1
-                ? idx + 1
-                : nothing
-            : nothing;
+        const attr = this.state.host.sortingOptions.mode === 'multiple' ? (idx > -1 ? idx + 1 : nothing) : nothing;
         const icon = state
             ? state.direction === 'ascending'
                 ? SORT_ICON_ASCENDING
@@ -81,11 +83,11 @@ export default class IgcGridLiteHeader extends LitElement {
             : SORT_ICON_ASCENDING;
         return state || this.isSortable
             ? html `<span
-          part=${partNameMap({ action: true, sorted: !!state?.direction })}
+          part=${partMap({ action: true, sorted: !!state?.direction })}
           @click=${this.isSortable ? this.#handleClick : nothing}
         >
           <igc-icon
-            part=${partNameMap({ 'sorting-action': !!state })}
+            part=${partMap({ 'sorting-action': !!state })}
             data-sortIndex=${attr}
             name=${icon}
             collection="internal"
@@ -114,7 +116,7 @@ export default class IgcGridLiteHeader extends LitElement {
     render() {
         return html `
       <div
-        part=${partNameMap({
+        part=${partMap({
             content: true,
             sortable: this.isSortable,
             resizing: this.resizeController.indicatorActive,
@@ -128,7 +130,7 @@ export default class IgcGridLiteHeader extends LitElement {
     }
 }
 __decorate([
-    consume({ context: gridStateContext, subscribe: true }),
+    consume({ context: GRID_STATE_CONTEXT, subscribe: true }),
     property({ attribute: false })
 ], IgcGridLiteHeader.prototype, "state", void 0);
 __decorate([

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 { IgcIconComponent } from 'igniteui-webcomponents';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport {\n  MIN_COL_RESIZE_WIDTH,\n  SORT_ICON_ASCENDING,\n  SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { partNameMap } 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';\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  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.sort);\n  }\n\n  protected get resizeController() {\n    return this.state.resizing;\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  #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.key);\n    const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n    const attr = this.state.host.sortConfiguration.multiple\n      ? idx > -1\n        ? idx + 1\n        : nothing\n      : nothing;\n    const icon = state\n      ? state.direction === 'ascending'\n        ? SORT_ICON_ASCENDING\n        : SORT_ICON_DESCENDING\n      : SORT_ICON_ASCENDING;\n\n    return state || this.isSortable\n      ? html`<span\n          part=${partNameMap({ action: true, sorted: !!state?.direction })}\n          @click=${this.isSortable ? this.#handleClick : nothing}\n        >\n          <igc-icon\n            part=${partNameMap({ '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.headerText ?? this.column.key;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partNameMap({\n          content: true,\n          sortable: this.isSortable,\n          resizing: this.resizeController.indicatorActive,\n        })}\n      >\n        ${this.renderContentPart()}\n        <div part=\"actions\">${this.renderSortPart()}</div>\n      </div>\n      ${this.renderResizePart()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [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,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,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;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,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,CAAC;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACzD,CAAC;IAED,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,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,IAAc,gBAAgB;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;IASD;QACE,KAAK,EAAE,CAAC;QAER,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IACD,uBAAuB;QACrB,MAAM,MAAM,GAA4B,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAEvD,IAAI,CAAC,gBAAgB,CACnB,mBAAmB,EACnB,GAAG,EAAE;YACH,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;QAC/C,CAAC,EACD,MAAM,CACP,CAAC;QACF,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,GAAG,CAAC,EAAE,OAAO,EAAgB,EAAE,EAAE;QAC5C,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,oBAAoB,CAAC,CAAC;QAC7D,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAElC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IACtD,CAAC,CAAC;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,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,KAAK,CAAC;QAC9C,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;IAC/B,CAAC,CAAC;IAEF,eAAe,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEhE,cAAc;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5D,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;QAC1E,MAAM,IAAI,GACR,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAChG,MAAM,IAAI,GAAG,KAAK;YAChB,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,WAAW;gBAC/B,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,oBAAoB;YACxB,CAAC,CAAC,mBAAmB,CAAC;QAExB,OAAO,KAAK,IAAI,IAAI,CAAC,UAAU;YAC7B,CAAC,CAAC,IAAI,CAAA;iBACK,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC;mBACnD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;;;mBAG7C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;6BAC5B,IAAI;mBACd,IAAI;;;gBAGP;YACV,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAES,iBAAiB;QACzB,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;QACjE,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,IAAI,CAAA,GAAG,cAAc,EAAE;;KAEtE,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;;AAtHM;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","sourcesContent":["import { consume } from '@lit/context';\nimport { IgcIconComponent } from 'igniteui-webcomponents';\nimport { html, LitElement, nothing } 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 { addThemingController } from '../internal/theming.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  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.sort);\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  constructor() {\n    super();\n\n    addThemingController(this, all);\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.key);\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.headerText ?? this.column.key;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${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

@@ -8,13 +8,11 @@ export default class IgcGridLiteRow<T extends object> extends LitElement {
     static get tagName(): "igc-grid-lite-row";
     static styles: import("lit").CSSResult;
     static register(): void;
-    protected _cells: NodeListOf<IgcGridLiteCell<T>>;
-    data: T;
+    data?: T;
     columns: Array<ColumnConfiguration<T>>;
-    get cells(): IgcGridLiteCell<T>[];
-    activeNode: ActiveNode<T>;
+    activeNode?: ActiveNode<T>;
     index: number;
-    connectedCallback(): void;
+    get cells(): IgcGridLiteCell<T>[];
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/row.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, nothing } from 'lit';
-import { property, queryAll } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
@@ -25,14 +25,11 @@ export default class IgcGridLiteRow extends LitElement {
         registerComponent(IgcGridLiteRow, IgcGridLiteCell);
     }
     get cells() {
-        return Array.from(this._cells);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('exportparts', 'cell');
+        return Array.from(this.renderRoot.querySelectorAll(IgcGridLiteCell.tagName));
     }
     render() {
-        const { column: key, row: index } = this.activeNode;
+        const { column: key, row: index } = this.activeNode ?? {};
+        const data = this.data ?? {};
         return html `
       ${map(this.columns, (column) => column.hidden
             ? nothing
@@ -41,14 +38,11 @@ export default class IgcGridLiteRow extends LitElement {
               .active=${key === column.key && index === this.index}
               .column=${column}
               .row=${this}
-              .value=${this.data[column.key]}
+              .value=${data[column.key]}
             ></igc-grid-lite-cell>`)}
     `;
     }
 }
-__decorate([
-    queryAll(IgcGridLiteCell.tagName)
-], IgcGridLiteRow.prototype, "_cells", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcGridLiteRow.prototype, "data", void 0);
@@ -59,6 +53,6 @@ __decorate([
     property({ attribute: false })
 ], IgcGridLiteRow.prototype, "activeNode", void 0);
 __decorate([
-    property({ attribute: false, type: Number })
+    property({ type: Number, 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,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,eAAe,MAAM,WAAW,CAAC;AAKxC,MAAM,CAAC,OAAO,OAAO,cAAiC,SAAQ,UAAU;IAAxE;;QAiBS,YAAO,GAAkC,EAAE,CAAC;QAU5C,UAAK,GAAG,CAAC,CAAC,CAAC;IAwBpB,CAAC;IAlDQ,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;IAWD,IAAW,KAAK;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAQe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAEpD,OAAO,IAAI,CAAA;QACP,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAC7B,MAAM,CAAC,MAAM;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;wBAEQ,GAAG,KAAK,MAAM,CAAC,GAAG,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;wBAC1C,MAAM;qBACT,IAAyB;uBACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;mCACT,CAC5B;KACF,CAAC;IACJ,CAAC;;AAvCS;IADT,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC;8CACgB;AAG3C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACf;AAGT;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACoB;AAO5C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAC3B","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration } from '../internal/types.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  @queryAll(IgcGridLiteCell.tagName)\n  protected _cells!: NodeListOf<IgcGridLiteCell<T>>;\n\n  @property({ attribute: false })\n  public data!: T;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  public get cells() {\n    return Array.from(this._cells);\n  }\n\n  @property({ attribute: false })\n  public activeNode!: ActiveNode<T>;\n\n  @property({ attribute: false, type: Number })\n  public index = -1;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('exportparts', 'cell');\n  }\n\n  protected override render() {\n    const { column: key, row: index } = this.activeNode;\n\n    return html`\n      ${map(this.columns, (column) =>\n        column.hidden\n          ? nothing\n          : html`<igc-grid-lite-cell\n              part=\"cell\"\n              .active=${key === column.key && index === this.index}\n              .column=${column}\n              .row=${this as IgcGridLiteRow<T>}\n              .value=${this.data[column.key]}\n            ></igc-grid-lite-cell>`\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":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,eAAe,MAAM,WAAW,CAAC;AAKxC,MAAM,CAAC,OAAO,OAAO,cAAiC,SAAQ,UAAU;IAAxE;;QAcS,YAAO,GAAkC,EAAE,CAAC;QAM5C,UAAK,GAAG,CAAC,CAAC,CAAC;IA0BpB,CAAC;IA7CQ,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;IAcD,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,OAAO,IAAI,CAAA;QACP,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAC7B,MAAM,CAAC,MAAM;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;wBAEQ,GAAG,KAAK,MAAM,CAAC,GAAG,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;wBAC1C,MAAM;qBACT,IAAyB;uBACvB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;mCACJ,CAC5B;KACF,CAAC;IACJ,CAAC;;AAlCM;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, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration } from '../internal/types.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 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    return html`\n      ${map(this.columns, (column) =>\n        column.hidden\n          ? nothing\n          : html`<igc-grid-lite-cell\n              part=\"cell\"\n              .active=${key === column.key && index === this.index}\n              .column=${column}\n              .row=${this as IgcGridLiteRow<T>}\n              .value=${data[column.key]}\n            ></igc-grid-lite-cell>`\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;\n  }\n}\n"]}

package/components/virtualizer.d.ts

@@ -3,7 +3,6 @@ export default class IgcVirtualizer extends LitVirtualizer {
     static get tagName(): "igc-virtualizer";
     static register(): void;
     scroller: boolean;
-    connectedCallback(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/virtualizer.js

@@ -12,10 +12,5 @@ export default class IgcVirtualizer extends LitVirtualizer {
     static register() {
         registerComponent(IgcVirtualizer);
     }
-    async connectedCallback() {
-        await super.layoutComplete;
-        super.connectedCallback();
-        this.setAttribute('tabindex', '0');
-    }
 }
 //# sourceMappingURL=virtualizer.js.map

package/components/virtualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../src/components/virtualizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,cAAc;IAA1D;;QASkB,aAAQ,GAAG,IAAI,CAAC;IAQlC,CAAC;IAhBQ,MAAM,KAAK,OAAO;QACvB,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;IAIe,KAAK,CAAC,iBAAiB;QACrC,MAAM,KAAK,CAAC,cAAc,CAAC;QAE3B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;CACF","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_BODY } from '../internal/tags.js';\n\nexport default class IgcVirtualizer extends LitVirtualizer {\n  public static get tagName() {\n    return GRID_BODY;\n  }\n\n  public static register(): void {\n    registerComponent(IgcVirtualizer);\n  }\n\n  public override scroller = true;\n\n  public override async connectedCallback() {\n    await super.layoutComplete;\n\n    super.connectedCallback();\n    this.setAttribute('tabindex', '0');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcVirtualizer.tagName]: IgcVirtualizer;\n  }\n}\n"]}
+{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../src/components/virtualizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,cAAc;IAA1D;;QASkB,aAAQ,GAAG,IAAI,CAAC;IAClC,CAAC;IATQ,MAAM,KAAK,OAAO;QACvB,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;CAGF","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_BODY } from '../internal/tags.js';\n\nexport default class IgcVirtualizer extends LitVirtualizer {\n  public static get tagName() {\n    return GRID_BODY;\n  }\n\n  public static register(): void {\n    registerComponent(IgcVirtualizer);\n  }\n\n  public override scroller = true;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcVirtualizer.tagName]: IgcVirtualizer;\n  }\n}\n"]}

package/controllers/data-operation.d.ts

@@ -3,7 +3,7 @@ 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';
-export declare class DataOperationsController<T extends object> implements ReactiveController {
+declare class DataOperationsController<T extends object> implements ReactiveController {
     protected host: GridHost<T>;
     protected sorting: SortDataOperation<T>;
     protected filtering: FilterDataOperation<T>;
@@ -15,3 +15,6 @@ export declare class DataOperationsController<T extends object> implements React
     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>;
+export { createDataOperationsController };
+export type { DataOperationsController };

package/controllers/data-operation.js

@@ -1,7 +1,7 @@
 import { isDefined } from '../internal/is-defined.js';
 import FilterDataOperation from '../operations/filter.js';
 import SortDataOperation from '../operations/sort.js';
-export class DataOperationsController {
+class DataOperationsController {
     constructor(host) {
         this.host = host;
         this.sorting = new SortDataOperation();
@@ -33,4 +33,8 @@ export class DataOperationsController {
         return transformed;
     }
 }
+function createDataOperationsController(host) {
+    return new DataOperationsController(host);
+}
+export { createDataOperationsController };
 //# sourceMappingURL=data-operation.js.map

package/controllers/data-operation.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-operation.js","sourceRoot":"","sources":["../../src/controllers/data-operation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAGtD,MAAM,OAAO,wBAAwB;IAInC,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAH7B,YAAO,GAAG,IAAI,iBAAiB,EAAK,CAAC;QACrC,cAAS,GAAG,IAAI,mBAAmB,EAAK,CAAC;QAGjD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAEzB,IAAc,aAAa;QACzB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAc,eAAe;QAC3B,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC;IAED,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,MAAO,CAAC;IACtD,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,IAAK,CAAC;IACpD,CAAC;IAEM,KAAK,CAAC,KAAK,CAAC,IAAS,EAAE,KAAyB;QACrD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QACrC,IAAI,WAAgB,CAAC;QAErB,WAAW,GAAG,IAAI,CAAC,eAAe;YAChC,CAAC,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YACpE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhD,WAAW,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC7E,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,WAAW,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { isDefined } from '../internal/is-defined.js';\nimport type { GridHost } from '../internal/types.js';\nimport FilterDataOperation from '../operations/filter.js';\nimport SortDataOperation from '../operations/sort.js';\nimport type { StateController } from './state.js';\n\nexport class DataOperationsController<T extends object> implements ReactiveController {\n  protected sorting = new SortDataOperation<T>();\n  protected filtering = new FilterDataOperation<T>();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  protected get hasCustomSort() {\n    return isDefined(this.host.dataPipelineConfiguration?.sort);\n  }\n\n  protected get hasCustomFilter() {\n    return isDefined(this.host.dataPipelineConfiguration?.filter);\n  }\n\n  protected get customFilter() {\n    return this.host.dataPipelineConfiguration!.filter!;\n  }\n\n  protected get customSort() {\n    return this.host.dataPipelineConfiguration!.sort!;\n  }\n\n  public async apply(data: T[], state: StateController<T>) {\n    const { filtering, sorting } = state;\n    let transformed: T[];\n\n    transformed = this.hasCustomFilter\n      ? await this.customFilter({ data, grid: this.host, type: 'filter' })\n      : this.filtering.apply(data, filtering.state);\n\n    transformed = this.hasCustomSort\n      ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })\n      : this.sorting.apply(transformed, sorting.state);\n\n    return transformed;\n  }\n}\n"]}
+{"version":3,"file":"data-operation.js","sourceRoot":"","sources":["../../src/controllers/data-operation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAGtD,MAAM,wBAAwB;IAI5B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAH7B,YAAO,GAAG,IAAI,iBAAiB,EAAK,CAAC;QACrC,cAAS,GAAG,IAAI,mBAAmB,EAAK,CAAC;QAGjD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAEzB,IAAc,aAAa;QACzB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAc,eAAe;QAC3B,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC;IAED,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,MAAO,CAAC;IACtD,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,IAAK,CAAC;IACpD,CAAC;IAEM,KAAK,CAAC,KAAK,CAAC,IAAS,EAAE,KAAyB;QACrD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QACrC,IAAI,WAAgB,CAAC;QAErB,WAAW,GAAG,IAAI,CAAC,eAAe;YAChC,CAAC,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YACpE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhD,WAAW,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC7E,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,WAAW,CAAC;IACrB,CAAC;CACF;AAED,SAAS,8BAA8B,CACrC,IAAiB;IAEjB,OAAO,IAAI,wBAAwB,CAAI,IAAI,CAAC,CAAC;AAC/C,CAAC;AAED,OAAO,EAAE,8BAA8B,EAAE,CAAC","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { isDefined } from '../internal/is-defined.js';\nimport type { GridHost } from '../internal/types.js';\nimport FilterDataOperation from '../operations/filter.js';\nimport SortDataOperation from '../operations/sort.js';\nimport type { StateController } from './state.js';\n\nclass DataOperationsController<T extends object> implements ReactiveController {\n  protected sorting = new SortDataOperation<T>();\n  protected filtering = new FilterDataOperation<T>();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  protected get hasCustomSort() {\n    return isDefined(this.host.dataPipelineConfiguration?.sort);\n  }\n\n  protected get hasCustomFilter() {\n    return isDefined(this.host.dataPipelineConfiguration?.filter);\n  }\n\n  protected get customFilter() {\n    return this.host.dataPipelineConfiguration!.filter!;\n  }\n\n  protected get customSort() {\n    return this.host.dataPipelineConfiguration!.sort!;\n  }\n\n  public async apply(data: T[], state: StateController<T>) {\n    const { filtering, sorting } = state;\n    let transformed: T[];\n\n    transformed = this.hasCustomFilter\n      ? await this.customFilter({ data, grid: this.host, type: 'filter' })\n      : this.filtering.apply(data, filtering.state);\n\n    transformed = this.hasCustomSort\n      ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })\n      : this.sorting.apply(transformed, sorting.state);\n\n    return transformed;\n  }\n}\n\nfunction createDataOperationsController<T extends object>(\n  host: GridHost<T>\n): DataOperationsController<T> {\n  return new DataOperationsController<T>(host);\n}\n\nexport { createDataOperationsController };\nexport type { DataOperationsController };\n"]}

package/controllers/dom.d.ts

@@ -1,19 +1,18 @@
-import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';
-import { type ReactiveController } from 'lit';
-import { type StyleInfo } from 'lit/directives/style-map.js';
+import type { ReactiveController } from 'lit';
+import type { StyleInfo } from 'lit/directives/style-map.js';
 import type { GridHost } from '../internal/types.js';
 import type { StateController } from './state.js';
-export declare class GridDOMController<T extends object> implements ReactiveController {
-    #private;
-    protected host: GridHost<T>;
-    protected state: StateController<T>;
+declare class GridDOMController<T extends object> implements ReactiveController {
+    protected readonly _host: GridHost<T>;
+    protected readonly _state: StateController<T>;
     constructor(host: GridHost<T>, state: StateController<T>);
-    get container(): import("../components/virtualizer.js").default;
     columnSizes: StyleInfo;
-    rowRenderer: RenderItemFunction<T>;
-    hostConnected(): Promise<void>;
+    hostConnected(): void;
     hostUpdate(): void;
     setScrollOffset(): void;
     protected setGridColumnSizes(): void;
     getActiveRowStyles(index: number): StyleInfo;
 }
+declare function createDomController<T extends object>(host: GridHost<T>, state: StateController<T>): GridDOMController<T>;
+export { createDomController };
+export type { GridDOMController };