igniteui-grid-lite 0.0.1

package/components/grid.d.ts

@@ -0,0 +1,226 @@
+import { ContextProvider } from '@lit/context';
+import { nothing } from 'lit';
+import { DataOperationsController } from '../controllers/data-operation.js';
+import { GridDOMController } from '../controllers/dom.js';
+import { StateController } from '../controllers/state.js';
+import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
+import type { ColumnConfiguration, DataPipelineConfiguration, GridSortConfiguration, Keys } from '../internal/types.js';
+import type { FilterExpression } from '../operations/filter/types.js';
+import type { SortExpression } from '../operations/sort/types.js';
+import IgcFilterRow from './filter-row.js';
+import IgcGridLiteHeaderRow from './header-row.js';
+import IgcGridLiteRow from './row.js';
+import IgcVirtualizer from './virtualizer.js';
+/**
+ * Event object for the filtering event of the grid.
+ */
+export interface IgcFilteringEvent<T extends object> {
+    /**
+     * The target column for the filter operation.
+     */
+    key: Keys<T>;
+    /**
+     * The filter expression(s) to apply.
+     */
+    expressions: FilterExpression<T>[];
+    /**
+     * The type of modification which will be applied to the filter
+     * state of the column.
+     *
+     * @remarks
+     * `add` - a new filter expression will be added to the state of the column.
+     * `modify` - an existing filter expression will be modified.
+     * `remove` - the expression(s) will be removed from the state of the column.
+     */
+    type: 'add' | 'modify' | 'remove';
+}
+/**
+ * Event object for the filtered event of the grid.
+ */
+export interface IgcFilteredEvent<T extends object> {
+    /**
+     * The target column for the filter operation.
+     */
+    key: Keys<T>;
+    /**
+     * The filter state of the column after the operation.
+     */
+    state: FilterExpression<T>[];
+}
+/**
+ * Events for the igc-grid-lite.
+ */
+export interface IgcGridLiteEventMap<T extends object> {
+    /**
+     * Emitted when sorting is initiated through the UI.
+     * Returns the sort expression which will be used for the operation.
+     *
+     * @remarks
+     * The event is cancellable which prevents the operation from being applied.
+     * The expression can be modified prior to the operation running.
+     *
+     * @event
+     */
+    sorting: CustomEvent<SortExpression<T>>;
+    /**
+     * Emitted when a sort operation initiated through the UI has completed.
+     * Returns the sort expression used for the operation.
+     *
+     * @event
+     */
+    sorted: CustomEvent<SortExpression<T>>;
+    /**
+     * Emitted when filtering is initiated through the UI.
+     *
+     * @remarks
+     * The event is cancellable which prevents the operation from being applied.
+     * The expression can be modified prior to the operation running.
+     *
+     * @event
+     */
+    filtering: CustomEvent<IgcFilteringEvent<T>>;
+    /**
+     * Emitted when a filter operation initiated through the UI has completed.
+     * Returns the filter state for the affected column.
+     *
+     * @event
+     */
+    filtered: CustomEvent<IgcFilteredEvent<T>>;
+}
+/**
+ * IgcGridLite is a web component for displaying data in a tabular format quick and easy.
+ *
+ * Out of the box it provides row virtualization, sort and filter operations (client and server side),
+ * the ability to template cells and headers and column hiding.
+ *
+ * @element igc-grid-lite
+ *
+ * @fires sorting - Emitted when sorting is initiated through the UI.
+ * @fires sorted - Emitted when a sort operation initiated through the UI has completed.
+ * @fires filtering - Emitted when filtering is initiated through the UI.
+ * @fires filtered - Emitted when a filter operation initiated through the UI has completed.
+ *
+ */
+export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteEventMap<T>> {
+    static get tagName(): "igc-grid-lite";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    protected stateController: StateController<T>;
+    protected DOM: GridDOMController<T>;
+    protected dataController: DataOperationsController<T>;
+    protected stateProvider: ContextProvider<{
+        __context__: StateController<any>;
+    }, this>;
+    protected scrollContainer: IgcVirtualizer;
+    protected headerRow: IgcGridLiteHeaderRow<T>;
+    protected filterRow: IgcFilterRow<T>;
+    protected dataState: Array<T>;
+    protected _rows: NodeListOf<IgcGridLiteRow<T>>;
+    /** Column configuration for the grid. */
+    columns: Array<ColumnConfiguration<T>>;
+    /** The data source for the grid. */
+    data: Array<T>;
+    /**
+     * Whether the grid will try to "resolve" its column configuration based on the passed
+     * data source.
+     *
+     * @remarks
+     * This is usually executed on initial rendering in the DOM. It depends on having an existing data source
+     * to infer the column configuration for the grid.
+     * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually
+     * result in empty column configuration for the grid.
+     *
+     * This property is ignored if any existing column configuration already exists in the grid.
+     *
+     * In a scenario where you want to bind a new data source and still keep the auto-generation behavior,
+     * make sure to reset the column collection of the grid before passing in the new data source.
+     *
+     * @example
+     * ```typescript
+     * // assuming autoGenerate is set to true
+     * grid.columns = [];
+     * grid.data = [...];
+     * ```
+     *
+     * @attr auto-generate
+     */
+    autoGenerate: boolean;
+    /** Sort configuration property for the grid. */
+    sortConfiguration: GridSortConfiguration;
+    /**
+     * Configuration object which controls remote data operations for the grid.
+     */
+    dataPipelineConfiguration: DataPipelineConfiguration<T>;
+    /**
+     * Set the sort state for the grid.
+     */
+    set sortExpressions(expressions: SortExpression<T>[]);
+    /**
+     * Get the sort state for the grid.
+     */
+    get sortExpressions(): SortExpression<T>[];
+    /**
+     * Set the filter state for the grid.
+     */
+    set filterExpressions(expressions: FilterExpression<T>[]);
+    /**
+     * Get the filter state for the grid.
+     */
+    get filterExpressions(): FilterExpression<T>[];
+    /**
+     * Returns the collection of rendered row elements in the grid.
+     *
+     * @remarks
+     * Since the grid has virtualization, this property returns only the currently rendered
+     * chunk of elements in the DOM.
+     */
+    get rows(): IgcGridLiteRow<T>[];
+    /**
+     * Returns the state of the data source after sort/filter operations
+     * have been applied.
+     */
+    get dataView(): ReadonlyArray<T>;
+    /**
+     * The total number of items in the {@link IgcGridLite.dataView} collection.
+     */
+    get totalItems(): number;
+    protected watchColumns(_: ColumnConfiguration<T>[], newConfig?: ColumnConfiguration<T>[]): void;
+    protected dataChanged(): void;
+    protected pipeline(): Promise<void>;
+    constructor();
+    /**
+     * Performs a filter operation in the grid based on the passed expression(s).
+     */
+    filter(config: FilterExpression<T> | FilterExpression<T>[]): void;
+    /**
+     * Performs a sort operation in the grid based on the passed expression(s).
+     */
+    sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
+    /**
+     * Resets the current sort state of the control.
+     */
+    clearSort(key?: Keys<T>): void;
+    /**
+     * Resets the current filter state of the control.
+     */
+    clearFilter(key?: Keys<T>): void;
+    /**
+     * Returns a {@link ColumnConfiguration} for a given column.
+     */
+    getColumn(id: Keys<T> | number): ColumnConfiguration<T> | undefined;
+    /**
+     * Updates the column configuration of the grid.
+     */
+    updateColumns(columns: ColumnConfiguration<T> | ColumnConfiguration<T>[]): void;
+    protected bodyClickHandler(event: MouseEvent): void;
+    protected bodyKeydownHandler(event: KeyboardEvent): void;
+    protected renderHeaderRow(): import("lit-html").TemplateResult<1>;
+    protected renderBody(): import("lit-html").TemplateResult<1>;
+    protected renderFilterRow(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcGridLite.tagName]: IgcGridLite<object>;
+    }
+}

package/components/grid.js

@@ -0,0 +1,227 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ContextProvider } from '@lit/context';
+import { IgcButtonComponent, IgcChipComponent, IgcDropdownComponent, IgcInputComponent, } from 'igniteui-webcomponents';
+import { html, nothing } from 'lit';
+import { eventOptions, property, query, queryAll, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { DataOperationsController } from '../controllers/data-operation.js';
+import { GridDOMController } from '../controllers/dom.js';
+import { gridStateContext, StateController } from '../controllers/state.js';
+import { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';
+import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_TAG } from '../internal/tags.js';
+import { addThemingController } from '../internal/theming.js';
+import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';
+import { watch } from '../internal/watch.js';
+import { styles } from '../styles/grid/themes/grid.base.css.js';
+import { all } from '../styles/grid/themes/themes.js';
+import IgcGridLiteCell from './cell.js';
+import IgcFilterRow from './filter-row.js';
+import IgcGridLiteHeaderRow from './header-row.js';
+import IgcGridLiteRow from './row.js';
+import IgcVirtualizer from './virtualizer.js';
+export class IgcGridLite extends EventEmitterBase {
+    static get tagName() {
+        return GRID_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(IgcGridLite, IgcVirtualizer, IgcGridLiteRow, IgcGridLiteHeaderRow, IgcFilterRow, IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent);
+    }
+    set sortExpressions(expressions) {
+        if (expressions.length) {
+            this.sort(expressions);
+        }
+    }
+    get sortExpressions() {
+        return Array.from(this.stateController.sorting.state.values());
+    }
+    set filterExpressions(expressions) {
+        if (expressions.length) {
+            this.filter(expressions);
+        }
+    }
+    get filterExpressions() {
+        const expressions = [];
+        for (const each of this.stateController.filtering.state.values) {
+            expressions.push(...each.all);
+        }
+        return expressions;
+    }
+    get rows() {
+        return Array.from(this._rows);
+    }
+    get dataView() {
+        return this.dataState;
+    }
+    get totalItems() {
+        return this.dataState.length;
+    }
+    watchColumns(_, newConfig = []) {
+        this.columns = newConfig.map((config) => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));
+    }
+    dataChanged() {
+        this.dataState = structuredClone(this.data);
+        autoGenerateColumns(this);
+        if (this.hasUpdated) {
+            this.pipeline();
+        }
+    }
+    async pipeline() {
+        this.dataState = await this.dataController.apply(structuredClone(this.data), this.stateController);
+    }
+    constructor() {
+        super();
+        this.stateController = new StateController(this);
+        this.DOM = new GridDOMController(this, this.stateController);
+        this.dataController = new DataOperationsController(this);
+        this.stateProvider = new ContextProvider(this, {
+            context: gridStateContext,
+            initialValue: this.stateController,
+        });
+        this.dataState = [];
+        this.columns = [];
+        this.data = [];
+        this.autoGenerate = false;
+        this.sortConfiguration = {
+            multiple: true,
+            triState: true,
+        };
+        addThemingController(this, all);
+    }
+    filter(config) {
+        this.stateController.filtering.filter(asArray(config).map((each) => typeof each.condition === 'string'
+            ?
+                Object.assign(each, {
+                    condition: getFilterOperandsFor(this.getColumn(each.key))[each.condition],
+                })
+            : each));
+    }
+    sort(expressions) {
+        this.stateController.sorting.sort(expressions);
+    }
+    clearSort(key) {
+        this.stateController.sorting.reset(key);
+        this.requestUpdate(PIPELINE);
+    }
+    clearFilter(key) {
+        this.stateController.filtering.reset(key);
+        this.requestUpdate(PIPELINE);
+    }
+    getColumn(id) {
+        return typeof id === 'number'
+            ? this.columns.at(id)
+            : this.columns.find(({ key }) => key === id);
+    }
+    updateColumns(columns) {
+        for (const column of asArray(columns)) {
+            const instance = this.columns.find((curr) => curr.key === column.key);
+            if (instance) {
+                Object.assign(instance, column);
+            }
+        }
+        this.requestUpdate(PIPELINE);
+    }
+    bodyClickHandler(event) {
+        const target = event
+            .composedPath()
+            .find((el) => el instanceof IgcGridLiteCell);
+        if (target) {
+            this.stateController.active = {
+                column: target.column.key,
+                row: target.row.index,
+            };
+        }
+    }
+    bodyKeydownHandler(event) {
+        if (this.scrollContainer.isSameNode(event.target)) {
+            this.stateController.navigation.navigate(event);
+        }
+    }
+    renderHeaderRow() {
+        return html `
+      <igc-grid-lite-header-row
+      style=${styleMap(this.DOM.columnSizes)}
+      .columns=${this.columns}
+      ></igc-grid-lite-header-row>
+    `;
+    }
+    renderBody() {
+        return html `
+      <igc-virtualizer
+        .items=${this.dataState}
+        .renderItem=${this.DOM.rowRenderer}
+        @click=${this.bodyClickHandler}
+        @keydown=${this.bodyKeydownHandler}
+      ></igc-virtualizer>
+    `;
+    }
+    renderFilterRow() {
+        return this.columns.some((column) => column.filter)
+            ? html `<igc-filter-row style=${styleMap(this.DOM.columnSizes)}></igc-filter-row>`
+            : nothing;
+    }
+    render() {
+        return html `
+      ${this.stateController.resizing.renderIndicator()}
+      ${this.renderHeaderRow()}
+      ${this.renderFilterRow()}
+      ${this.renderBody()}
+    `;
+    }
+}
+__decorate([
+    query(IgcVirtualizer.tagName)
+], IgcGridLite.prototype, "scrollContainer", void 0);
+__decorate([
+    query(IgcGridLiteHeaderRow.tagName)
+], IgcGridLite.prototype, "headerRow", void 0);
+__decorate([
+    query(IgcFilterRow.tagName)
+], IgcGridLite.prototype, "filterRow", void 0);
+__decorate([
+    state()
+], IgcGridLite.prototype, "dataState", void 0);
+__decorate([
+    queryAll(IgcGridLiteRow.tagName)
+], IgcGridLite.prototype, "_rows", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLite.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLite.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-generate' })
+], IgcGridLite.prototype, "autoGenerate", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLite.prototype, "sortConfiguration", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLite.prototype, "dataPipelineConfiguration", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLite.prototype, "sortExpressions", null);
+__decorate([
+    property({ attribute: false })
+], IgcGridLite.prototype, "filterExpressions", null);
+__decorate([
+    watch('columns')
+], IgcGridLite.prototype, "watchColumns", null);
+__decorate([
+    watch('data')
+], IgcGridLite.prototype, "dataChanged", null);
+__decorate([
+    watch(PIPELINE)
+], IgcGridLite.prototype, "pipeline", null);
+__decorate([
+    eventOptions({ capture: true })
+], IgcGridLite.prototype, "bodyClickHandler", null);
+//# sourceMappingURL=grid.js.map

package/components/grid.js.map

@@ -0,0 +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"]}

package/components/header-row.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+import { type StateController } from '../controllers/state.js';
+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>>;
+    get headers(): IgcGridLiteHeader<T>[];
+    constructor();
+    connectedCallback(): void;
+    protected shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, this>): boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcGridLiteHeaderRow.tagName]: IgcGridLiteHeaderRow<object>;
+    }
+}

package/components/header-row.js

@@ -0,0 +1,72 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property, queryAll } 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 { 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';
+import IgcGridLiteHeader from './header.js';
+export default class IgcGridLiteHeaderRow extends LitElement {
+    static get tagName() {
+        return GRID_HEADER_ROW_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(IgcGridLiteHeaderRow, IgcGridLiteHeader);
+    }
+    get headers() {
+        return Array.from(this._headers);
+    }
+    constructor() {
+        super();
+        this.columns = [];
+        this.addEventListener('click', this.#activeFilterColumn);
+    }
+    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);
+    }
+    shouldUpdate(props) {
+        for (const header of this.headers) {
+            header.requestUpdate();
+        }
+        return super.shouldUpdate(props);
+    }
+    render() {
+        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>`)}`;
+    }
+}
+__decorate([
+    queryAll(IgcGridLiteHeader.tagName)
+], IgcGridLiteHeaderRow.prototype, "_headers", void 0);
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], IgcGridLiteHeaderRow.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteHeaderRow.prototype, "columns", void 0);
+//# sourceMappingURL=header-row.js.map

package/components/header-row.js.map

@@ -0,0 +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"]}

package/components/header.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, nothing } from 'lit';
+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;
+    static get tagName(): "igc-grid-lite-header";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    protected get context(): IgcHeaderContext<T>;
+    protected get isSortable(): boolean;
+    protected get resizeController(): import("../controllers/resize.js").ResizeController<T>;
+    state: StateController<T>;
+    column: ColumnConfiguration<T>;
+    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>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;
+    }
+}