igniteui-grid-lite 0.0.1 → 0.1.0

package/README.md

@@ -1,17 +1,242 @@
 # Ignite UI Grid Lite
 [![Node.js CI](https://github.com/IgniteUI/igniteui-grid-lite/actions/workflows/node.js.yml/badge.svg)](https://github.com/IgniteUI/igniteui-grid-lite/actions/workflows/node.js.yml)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-grid-lite/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-grid-lite?branch=master)
+[![npm version](https://badge.fury.io/js/igniteui-grid-lite.svg)](https://badge.fury.io/js/igniteui-grid-lite)
 
+Ignite UI Grid Lite is a high-performance, lightweight data grid built as a web component using [Lit](https://lit.dev/). It provides essential grid functionality with a small footprint, making it perfect for applications that need fast, efficient data visualization without the overhead of a full-featured grid.
 
-This is still a **very** early proof of concept for a web component based data grid.
+## Table of Contents
+- [Features](#features)
+- [Browser Support](#browser-support)
+- [Getting Started](#getting-started)
+- [Usage](#usage)
+- [Building the Library](#building-the-library)
+- [Running Tests](#running-tests)
+- [Documentation](#documentation)
+- [Ignite UI Open-Source vs. Premium for Web Comonents](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-open-source-vs-premium)
+- [Contributing](#contributing)
+- [Support](#support)
+- [License](#license)
 
-## Local Development
+## Features
 
-1. Clone the repository.
-2. Run `npm install`
-3. Run `npm run build`
-3. Play and explore the codebase.
+Ignite UI Grid Lite provides core data grid capabilities with an emphasis on performance and simplicity:
 
-## Local demo with Vite
+- **High Performance Row Virtualization** - Handles large datasets efficiently with built-in virtual scrolling
+- **Column Filtering** - Built-in column filtering capabilities
+- **Sorting** - Column sorting support for better data organization
+- **Lightweight** - Minimal bundle size for fast load times
+- **Web Standards** - Built with web components for framework-agnostic usage
+- **Modern Architecture** - Built with Lit and TypeScript for maintainability
+- **Customizable** - Flexible theming and styling options
+- **Cell Templating** - Custom cell rendering for flexible data display
+- **Header Templating** - Custom header rendering for enhanced grid headers
+- **Accessible** - Designed with accessibility in mind
 
-Run `npm start` to open the demo page in `demo/index.html`
+## Browser Support
+
+Ignite UI Grid Lite supports all modern browsers:
+
+| ![chrome] | ![firefox] | ![edge] | ![safari] | ![opera] |
+|:---:|:---:|:---:|:---:|:---:|
+| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
+
+## Getting Started
+
+### Installation
+
+Install via npm:
+
+```bash
+npm install igniteui-grid-lite
+```
+
+### Quick Start
+
+1. Import the grid component in your JavaScript/TypeScript file:
+
+```typescript
+import 'igniteui-grid-lite';
+```
+
+2. Use the grid in your HTML:
+
+```html
+<igc-grid-lite>
+  <!-- Grid configuration here -->
+</igc-grid-lite>
+```
+
+3. For a complete example, check out the [demo application](./demo).
+
+## Usage
+
+For detailed usage instructions and API documentation, visit:
+- <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview">Grid Lite Overview</a>
+- [API Documentation](https://igniteui.github.io/igniteui-grid-lite/)
+
+## Building the Library
+
+### Setup
+
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/IgniteUI/igniteui-grid-lite.git
+cd igniteui-grid-lite
+npm install
+```
+
+### Build
+
+To build the library:
+
+```bash
+npm run build
+```
+
+This will:
+- Analyze custom elements
+- Build the TypeScript source
+- Generate API documentation
+
+### Development
+
+Start the development server with live reload:
+
+```bash
+npm start
+```
+
+This will open the demo page at `demo/index.html` with automatic rebuilding on file changes.
+
+## Running Tests
+
+Run tests once:
+
+```bash
+npm test
+```
+
+Run tests in watch mode:
+
+```bash
+npm run test:watch
+```
+
+Tests are written using [@web/test-runner](https://modern-web.dev/docs/test-runner/overview/) and [@open-wc/testing](https://open-wc.org/docs/testing/helpers/).
+
+## Documentation
+
+### API Documentation
+
+The API documentation is generated using [TypeDoc](https://typedoc.org/). To build the docs:
+
+```bash
+npm run build
+```
+
+Documentation will be available in the build output.
+
+### Additional Resources
+
+- <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started">Ignite UI Web Components Product Documentation</a>
+- <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview">Grid Lite Documentation</a>
+- [Web Components Guide](https://lit.dev/)
+
+## Ignite UI Grid Lite vs. Ignite UI for Web Components
+
+Ignite UI Grid Lite is designed as a lightweight, open-source alternative to the full-featured <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid">Ignite UI for Web Components Data Grid</a>, while allowing for an easy swap with the full-featured grid, if application needs require it.
+
+### Ignite UI Grid Lite (Open Source - MIT)
+
+**Best for:**
+- Applications requiring basic grid functionality
+- Projects where bundle size is critical
+- Framework-agnostic web applications
+- Community-driven development
+
+**Includes:**
+- Core data virtualization
+- Basic filtering and sorting
+- Lightweight and fast
+- MIT licensed and free for all use
+
+**Best for:**
+- Enterprise applications requiring advanced features
+- Complex data scenarios with editing, grouping, and aggregation
+- Applications needing professional support and SLA
+
+**Includes:**
+- All Grid Lite features plus:
+  - Advanced filtering with query builder
+  - Excel-style column filtering
+  - Grouping
+  - Cell editing, row editing, batch editing
+  - Summaries and aggregations
+  - Excel, PDF, and CSV export
+  - Column pinning, hiding, and resizing
+  - Row selection
+  - Paging
+  - Multi-column headers and collapsible column groups
+  - Cell merging
+  - Custom row layouts
+  - Master-detail views
+  - Hierarchical grid
+  - Tree grid
+  - Pivot grid
+  - 24/5 developer support
+
+<a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-open-source-vs-premium">Learn more about Open-Source vs Premium Ignite UI options</a>
+
+## Contributing
+
+We welcome contributions! Please see our [contributing guidelines](CONTRIBUTING.md) for details on:
+- Code of conduct
+- Development workflow
+- Submitting pull requests
+- Coding standards
+
+To contribute:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## Support
+
+### Community Support
+
+Community support for open source usage of this product is available at:
+- [GitHub Issues](https://github.com/IgniteUI/igniteui-grid-lite/issues) - Report bugs or request features
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/igniteui) - Ask questions using the `igniteui` tag
+
+### Commercial Support
+
+For professional support and access to the full Ignite UI for Web Components suite with advanced grid features:
+- Visit [Infragistics Support](https://www.infragistics.com/support)
+- Explore [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components)
+- [Register for a trial](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+**MIT License** - Free for commercial and non-commercial use.
+
+© Copyright 2025 INFRAGISTICS. All Rights Reserved.
+
+For the commercial Ignite UI for Angular product, please visit [Infragistics Licensing](https://www.infragistics.com/legal/license).
+
+---
+
+**Built with ❤️ by [Infragistics](https://www.infragistics.com/)**
+
+<!-- Browser Logos -->
+[chrome]: https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png "Google Chrome"
+[firefox]: https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png "Mozilla Firefox"
+[edge]: https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png "Microsoft Edge"
+[opera]: https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png "Opera"
+[safari]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png "Safari"

package/components/cell.d.ts

@@ -26,7 +26,7 @@ export default class IgcGridLiteCell<T extends object> extends LitElement {
      */
     row: IgcGridLiteRow<T>;
     protected get context(): IgcCellContext<T>;
-    protected render(): unknown;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/cell.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_CELL_TAG } from '../internal/tags.js';
 import { styles } from '../styles/body-cell/body-cell.css.js';
@@ -30,9 +31,7 @@ export default class IgcGridLiteCell extends LitElement {
         };
     }
     render() {
-        return this.column.cellTemplate
-            ? this.column.cellTemplate(this.context)
-            : html `${this.value}`;
+        return html `${cache(this.column.cellTemplate ? this.column.cellTemplate(this.context) : html `${this.value}`)}`;
     }
 }
 __decorate([

package/components/cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell.js","sourceRoot":"","sources":["../../src/components/cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAM9D,MAAM,CAAC,OAAO,OAAO,eAAkC,SAAQ,UAAU;IAAzE;;QA4BS,WAAM,GAAG,KAAK,CAAC;IAqBxB,CAAC;IAhDQ,MAAM,KAAK,OAAO;QACvB,OAAO,aAAa,CAAC;IACvB,CAAC;aAEsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IA0BD,IAAc,OAAO;QACnB,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SACc,CAAC;IACpC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY;YAC7B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAmC,CAAC;YACpE,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;;AAjCM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACA;AAMxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACQ;AAOhC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACrB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_CELL_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcCellContext, PropertyType } from '../internal/types.js';\nimport { styles } from '../styles/body-cell/body-cell.css.js';\nimport type IgcGridLiteRow from './row.js';\n\n/**\n * Component representing a DOM cell of the Igc grid.\n */\nexport default class IgcGridLiteCell<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_CELL_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteCell);\n  }\n\n  /**\n   * The value which will be rendered by the component.\n   */\n  @property({ attribute: false })\n  public value!: PropertyType<T>;\n\n  /**\n   * A reference to the column configuration object.\n   */\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  /**\n   * Indicates whether this is the active cell in the grid.\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * The parent row component holding this cell.\n   */\n  public row!: IgcGridLiteRow<T>;\n\n  protected get context(): IgcCellContext<T> {\n    return {\n      parent: this,\n      row: this.row,\n      column: this.column,\n      value: this.value,\n    } as unknown as IgcCellContext<T>;\n  }\n\n  protected override render() {\n    return this.column.cellTemplate\n      ? this.column.cellTemplate(this.context as IgcCellContext<T> as any)\n      : html`${this.value}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteCell.tagName]: IgcGridLiteCell<object>;\n  }\n}\n"]}
+{"version":3,"file":"cell.js","sourceRoot":"","sources":["../../src/components/cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAM9D,MAAM,CAAC,OAAO,OAAO,eAAkC,SAAQ,UAAU;IAAzE;;QA4BS,WAAM,GAAG,KAAK,CAAC;IAqBxB,CAAC;IAhDQ,MAAM,KAAK,OAAO;QACvB,OAAO,aAAa,CAAC;IACvB,CAAC;aAEsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IA0BD,IAAc,OAAO;QACnB,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SACc,CAAC;IACpC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,KAAK,CACjB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,CAC/F,EAAE,CAAC;IACN,CAAC;;AAjCM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACA;AAMxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACQ;AAOhC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACrB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_CELL_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcCellContext, PropertyType } from '../internal/types.js';\nimport { styles } from '../styles/body-cell/body-cell.css.js';\nimport type IgcGridLiteRow from './row.js';\n\n/**\n * Component representing a DOM cell of the Igc grid.\n */\nexport default class IgcGridLiteCell<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_CELL_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteCell);\n  }\n\n  /**\n   * The value which will be rendered by the component.\n   */\n  @property({ attribute: false })\n  public value!: PropertyType<T>;\n\n  /**\n   * A reference to the column configuration object.\n   */\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  /**\n   * Indicates whether this is the active cell in the grid.\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * The parent row component holding this cell.\n   */\n  public row!: IgcGridLiteRow<T>;\n\n  protected get context(): IgcCellContext<T> {\n    return {\n      parent: this,\n      row: this.row,\n      column: this.column,\n      value: this.value,\n    } as unknown as IgcCellContext<T>;\n  }\n\n  protected override render() {\n    return html`${cache(\n      this.column.cellTemplate ? this.column.cellTemplate(this.context as any) : html`${this.value}`\n    )}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteCell.tagName]: IgcGridLiteCell<object>;\n  }\n}\n"]}

package/components/column.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { BaseColumnConfiguration, ColumnFilterConfiguration, ColumnSortConfiguration, IgcCellContext, IgcHeaderContext } from '../internal/types.js';
+/**
+ * @element igc-grid-lite-column
+ */
+export declare class IgcGridLiteColumn<T extends object> extends LitElement implements BaseColumnConfiguration<T> {
+    static get tagName(): "igc-grid-lite-column";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    /** Callback context to notify the parent grid about configuration changes */
+    protected _setConfig?: (config: BaseColumnConfiguration<T>) => void;
+    /** The key of the column, used to identify the data field. */
+    key: keyof T;
+    /** The data type of the column's values. */
+    type?: 'number' | 'string' | 'boolean';
+    /** The header text of the column. */
+    headerText?: string;
+    /** The width of the column. */
+    width?: string;
+    /** Indicates whether the column is hidden. */
+    hidden: boolean;
+    /** Indicates whether the column is resizable. */
+    resizable: boolean;
+    /** Sort configuration for the column. */
+    sort?: ColumnSortConfiguration<T> | boolean;
+    /** Filter configuration for the column. */
+    filter?: ColumnFilterConfiguration | boolean;
+    /** Custom header template for the column. */
+    headerTemplate?: (params: IgcHeaderContext<T>) => unknown;
+    /** Custom cell template for the column. */
+    cellTemplate?: (params: IgcCellContext<T>) => unknown;
+    protected update(props: PropertyValues<this>): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcGridLiteColumn.tagName]: IgcGridLiteColumn<object>;
+    }
+}

package/components/column.js

@@ -0,0 +1,77 @@
+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 { css, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { COLUMN_UPDATE_CONTEXT } from '../internal/context.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_COLUMN_TAG } from '../internal/tags.js';
+export class IgcGridLiteColumn extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'string';
+        this.hidden = false;
+        this.resizable = false;
+        this.sort = false;
+        this.filter = false;
+    }
+    static get tagName() {
+        return GRID_COLUMN_TAG;
+    }
+    static { this.styles = css `
+    :host {
+      display: none;
+      contain: strict;
+    }
+  `; }
+    static register() {
+        registerComponent(IgcGridLiteColumn);
+    }
+    update(props) {
+        if (this.hasUpdated && props.size > 0) {
+            this._setConfig?.(this);
+        }
+        super.update(props);
+    }
+    render() {
+        return nothing;
+    }
+}
+__decorate([
+    consume({ context: COLUMN_UPDATE_CONTEXT })
+], IgcGridLiteColumn.prototype, "_setConfig", void 0);
+__decorate([
+    property()
+], IgcGridLiteColumn.prototype, "key", void 0);
+__decorate([
+    property()
+], IgcGridLiteColumn.prototype, "type", void 0);
+__decorate([
+    property()
+], IgcGridLiteColumn.prototype, "headerText", void 0);
+__decorate([
+    property()
+], IgcGridLiteColumn.prototype, "width", void 0);
+__decorate([
+    property({ type: Boolean })
+], IgcGridLiteColumn.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], IgcGridLiteColumn.prototype, "resizable", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteColumn.prototype, "sort", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteColumn.prototype, "filter", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteColumn.prototype, "headerTemplate", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteColumn.prototype, "cellTemplate", void 0);
+//# sourceMappingURL=column.js.map

package/components/column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.js","sourceRoot":"","sources":["../../src/components/column.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAYtD,MAAM,OAAO,iBACX,SAAQ,UAAU;IADpB;;QA6BS,SAAI,GAAqC,QAAQ,CAAC;QAYzC,WAAM,GAAG,KAAK,CAAC;QAIxB,cAAS,GAAG,KAAK,CAAC;QAIlB,SAAI,GAA0C,KAAK,CAAC;QAIpD,WAAM,GAAyC,KAAK,CAAC;IAqB9D,CAAC;IAtEQ,MAAM,KAAK,OAAO;QACvB,OAAO,eAAe,CAAC;IACzB,CAAC;aAEsB,WAAM,GAAG,GAAG,CAAA;;;;;GAKlC,AAL4B,CAK3B;IAEK,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IA8CkB,MAAM,CAAC,KAA2B;QACnD,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,OAAO,OAAO,CAAC;IACjB,CAAC;;AApDS;IADT,OAAO,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,CAAC;qDACwB;AAI7D;IADN,QAAQ,EAAE;8CACU;AAId;IADN,QAAQ,EAAE;+CAC8C;AAIlD;IADN,QAAQ,EAAE;qDACgB;AAIpB;IADN,QAAQ,EAAE;gDACW;AAIN;IADf,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACG;AAIxB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACH;AAIlB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CAC4B;AAIpD;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAC6B;AAIrD;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yDACkC;AAI1D;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDAC8B","sourcesContent":["import { consume } from '@lit/context';\nimport { css, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { COLUMN_UPDATE_CONTEXT } from '../internal/context.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_COLUMN_TAG } from '../internal/tags.js';\nimport type {\n  BaseColumnConfiguration,\n  ColumnFilterConfiguration,\n  ColumnSortConfiguration,\n  IgcCellContext,\n  IgcHeaderContext,\n} from '../internal/types.js';\n\n/**\n * @element igc-grid-lite-column\n */\nexport class IgcGridLiteColumn<T extends object>\n  extends LitElement\n  implements BaseColumnConfiguration<T>\n{\n  public static get tagName() {\n    return GRID_COLUMN_TAG;\n  }\n\n  public static override styles = css`\n    :host {\n      display: none;\n      contain: strict;\n    }\n  `;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteColumn);\n  }\n\n  /** Callback context to notify the parent grid about configuration changes */\n  @consume({ context: COLUMN_UPDATE_CONTEXT })\n  protected _setConfig?: (config: BaseColumnConfiguration<T>) => void;\n\n  /** The key of the column, used to identify the data field. */\n  @property()\n  public key!: keyof T;\n\n  /** The data type of the column's values. */\n  @property()\n  public type?: 'number' | 'string' | 'boolean' = 'string';\n\n  /** The header text of the column. */\n  @property()\n  public headerText?: string;\n\n  /** The width of the column. */\n  @property()\n  public width?: string;\n\n  /** Indicates whether the column is hidden. */\n  @property({ type: Boolean })\n  public override hidden = false;\n\n  /** Indicates whether the column is resizable. */\n  @property({ type: Boolean })\n  public resizable = false;\n\n  /** Sort configuration for the column. */\n  @property({ attribute: false })\n  public sort?: ColumnSortConfiguration<T> | boolean = false;\n\n  /** Filter configuration for the column. */\n  @property({ attribute: false })\n  public filter?: ColumnFilterConfiguration | boolean = false;\n\n  /** Custom header template for the column. */\n  @property({ attribute: false })\n  public headerTemplate?: (params: IgcHeaderContext<T>) => unknown;\n\n  /** Custom cell template for the column. */\n  @property({ attribute: false })\n  public cellTemplate?: (params: IgcCellContext<T>) => unknown;\n\n  protected override update(props: PropertyValues<this>): void {\n    if (this.hasUpdated && props.size > 0) {\n      this._setConfig?.(this);\n    }\n\n    super.update(props);\n  }\n\n  protected override render(): unknown {\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteColumn.tagName]: IgcGridLiteColumn<object>;\n  }\n}\n"]}

package/components/filter-row.d.ts

@@ -1,6 +1,6 @@
 import { IgcDropdownComponent, type IgcIconComponent, IgcInputComponent } from 'igniteui-webcomponents';
 import { LitElement, nothing } from 'lit';
-import { type StateController } from '../controllers/state.js';
+import type { StateController } from '../controllers/state.js';
 import type { ColumnConfiguration } from '../internal/types.js';
 import type { FilterExpressionTree } from '../operations/filter/tree.js';
 import type { FilterExpression, FilterOperation } from '../operations/filter/types.js';

package/components/filter-row.js

@@ -9,19 +9,21 @@ import { IgcDropdownComponent, IgcInputComponent, } from 'igniteui-webcomponents
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { gridStateContext } from '../controllers/state.js';
 import { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';
+import { GRID_STATE_CONTEXT } from '../internal/context.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_FILTER_ROW_TAG } from '../internal/tags.js';
 import { getFilterOperandsFor } from '../internal/utils.js';
 import { watch } from '../internal/watch.js';
 import { styles } from '../styles/filter-row/filter-row.css.js';
 function prefixedIcon(icon) {
-    return html `<igc-icon
-    slot="prefix"
-    name=${ifDefined(icon)}
-    collection="internal"
-  ></igc-icon>`;
+    return html `
+    <igc-icon
+      slot="prefix"
+      name=${ifDefined(icon)}
+      collection="internal"
+    ></igc-icon>
+  `;
 }
 export default class IgcFilterRow extends LitElement {
     constructor() {
@@ -139,27 +141,31 @@ export default class IgcFilterRow extends LitElement {
     }
     renderCriteriaButton(expr, index) {
         return index
-            ? html `<igc-button
-          variant="flat"
-          @click=${this.#chipCriteriaFor(expr)}
-        >
-          ${expr.criteria}
-        </igc-button>`
+            ? html `
+          <igc-button
+            variant="flat"
+            @click=${this.#chipCriteriaFor(expr)}
+          >
+            ${expr.criteria}
+          </igc-button>
+        `
             : nothing;
     }
     renderExpressionChip(props) {
         const { name, unary } = props.expression.condition;
         const { searchTerm: term } = props.expression;
         const prefix = html `<span slot="select"></span>${prefixedIcon(name)}`;
-        return html `<igc-chip
-      selectable
-      removable
-      ?selected=${props.selected}
-      @igcRemove=${props.onRemove}
-      @igcSelect=${props.onSelect}
-    >
-      ${prefix}${unary ? name : term}
-    </igc-chip>`;
+        return html `
+      <igc-chip
+        selectable
+        removable
+        ?selected=${props.selected}
+        @igcRemove=${props.onRemove}
+        @igcSelect=${props.onSelect}
+      >
+        ${prefix}${unary ? name : term}
+      </igc-chip>
+    `;
     }
     renderActiveChips() {
         const state = this.filterController.get(this.column.key);
@@ -222,7 +228,8 @@ export default class IgcFilterRow extends LitElement {
     </igc-icon>`;
     }
     renderInputArea() {
-        return html `<igc-input
+        return html `
+      <igc-input
         outlined
         value=${ifDefined(this.expression.searchTerm)}
         placeholder="Add filter value"
@@ -232,14 +239,17 @@ export default class IgcFilterRow extends LitElement {
       >
         ${this.renderDropdownTarget()}
       </igc-input>
-      ${this.renderDropdown()}`;
+      ${this.renderDropdown()}
+    `;
     }
     renderActiveState() {
-        return html `<div part="active-state">
-      <div part="filter-row-input">${this.renderInputArea()}</div>
-      <div part="filter-row-filters">${this.renderActiveChips()}</div>
-      <div part="filter-row-actions">${this.renderFilterActions()}</div>
-    </div> `;
+        return html `
+      <div part="active-state">
+        <div part="filter-row-input">${this.renderInputArea()}</div>
+        <div part="filter-row-filters">${this.renderActiveChips()}</div>
+        <div part="filter-row-actions">${this.renderFilterActions()}</div>
+      </div>
+    `;
     }
     renderInactiveChips(column, state) {
         return Array.from(state).map((expression, idx) => {
@@ -275,18 +285,20 @@ export default class IgcFilterRow extends LitElement {
         return partial ? this.renderInactiveChips(column, state) : chip;
     }
     renderInactiveState() {
-        return this.state.host.columns.map((column) => column.hidden
+        return this.state.columns.map((column) => column.hidden
             ? nothing
-            : html `<div part="filter-row-preview">
-            ${column.filter ? this.renderFilterState(column) : nothing}
-          </div>`);
+            : html `
+            <div part="filter-row-preview">
+              ${column.filter ? this.renderFilterState(column) : nothing}
+            </div>
+          `);
     }
     render() {
         return html `${this.active ? this.renderActiveState() : this.renderInactiveState()}`;
     }
 }
 __decorate([
-    consume({ context: gridStateContext, subscribe: true }),
+    consume({ context: GRID_STATE_CONTEXT, subscribe: true }),
     property({ attribute: false })
 ], IgcFilterRow.prototype, "state", void 0);
 __decorate([