igniteui-grid-lite 0.0.1

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+© Copyright 2025 INFRAGISTICS.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# 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)
+
+
+This is still a **very** early proof of concept for a web component based data grid.
+
+## Local Development
+
+1. Clone the repository.
+2. Run `npm install`
+3. Run `npm run build`
+3. Play and explore the codebase.
+
+## Local demo with Vite
+
+Run `npm start` to open the demo page in `demo/index.html`

package/components/cell.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import type { ColumnConfiguration, IgcCellContext, PropertyType } from '../internal/types.js';
+import type IgcGridLiteRow from './row.js';
+/**
+ * Component representing a DOM cell of the Igc grid.
+ */
+export default class IgcGridLiteCell<T extends object> extends LitElement {
+    static get tagName(): "igc-grid-lite-cell";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    /**
+     * The value which will be rendered by the component.
+     */
+    value: PropertyType<T>;
+    /**
+     * A reference to the column configuration object.
+     */
+    column: ColumnConfiguration<T>;
+    /**
+     * Indicates whether this is the active cell in the grid.
+     *
+     */
+    active: boolean;
+    /**
+     * The parent row component holding this cell.
+     */
+    row: IgcGridLiteRow<T>;
+    protected get context(): IgcCellContext<T>;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcGridLiteCell.tagName]: IgcGridLiteCell<object>;
+    }
+}

package/components/cell.js

@@ -0,0 +1,47 @@
+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 { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.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';
+export default class IgcGridLiteCell extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+    }
+    static get tagName() {
+        return GRID_CELL_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(IgcGridLiteCell);
+    }
+    get context() {
+        return {
+            parent: this,
+            row: this.row,
+            column: this.column,
+            value: this.value,
+        };
+    }
+    render() {
+        return this.column.cellTemplate
+            ? this.column.cellTemplate(this.context)
+            : html `${this.value}`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteCell.prototype, "value", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteCell.prototype, "column", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcGridLiteCell.prototype, "active", void 0);
+//# sourceMappingURL=cell.js.map

package/components/cell.js.map

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

package/components/filter-row.d.ts

@@ -0,0 +1,47 @@
+import { IgcDropdownComponent, type IgcIconComponent, IgcInputComponent } from 'igniteui-webcomponents';
+import { LitElement, nothing } from 'lit';
+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';
+type ExpressionChipProps<T> = {
+    expression: FilterExpression<T>;
+    selected: boolean;
+    onRemove: (e: Event) => Promise<void>;
+    onSelect: (e: Event) => Promise<void>;
+};
+export default class IgcFilterRow<T extends object> extends LitElement {
+    #private;
+    static get tagName(): "igc-filter-row";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    state: StateController<T>;
+    protected get isNumeric(): boolean;
+    protected get filterController(): import("../controllers/filter.js").FilterController<T>;
+    protected get condition(): FilterOperation<T>;
+    active: boolean;
+    input: IgcInputComponent;
+    conditionElement: IgcIconComponent;
+    dropdown: IgcDropdownComponent;
+    column: ColumnConfiguration<T>;
+    expression: FilterExpression<T>;
+    protected activeChanged(): void;
+    protected renderCriteriaButton(expr: FilterExpression<T>, index: number): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected renderExpressionChip(props: ExpressionChipProps<T>): import("lit-html").TemplateResult<1>;
+    protected renderActiveChips(): typeof nothing | import("lit-html").TemplateResult<1>[];
+    protected renderFilterActions(): import("lit-html").TemplateResult<1>;
+    protected renderDropdown(): import("lit-html").TemplateResult<1>;
+    protected renderDropdownTarget(): import("lit-html").TemplateResult<1>;
+    protected renderInputArea(): import("lit-html").TemplateResult<1>;
+    protected renderActiveState(): import("lit-html").TemplateResult<1>;
+    protected renderInactiveChips(column: ColumnConfiguration<T>, state: FilterExpressionTree<T>): import("lit-html").TemplateResult<1>[];
+    protected renderFilterState(column: ColumnConfiguration<T>): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<1>[];
+    protected renderInactiveState(): (typeof nothing | import("lit-html").TemplateResult<1>)[];
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcFilterRow.tagName]: IgcFilterRow<object>;
+    }
+}
+export {};

package/components/filter-row.js

@@ -0,0 +1,313 @@
+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 { 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 { 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>`;
+}
+export default class IgcFilterRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.column = DEFAULT_COLUMN_CONFIG;
+    }
+    static get tagName() {
+        return GRID_FILTER_ROW_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(IgcFilterRow);
+    }
+    get isNumeric() {
+        return this.column.type === 'number';
+    }
+    get filterController() {
+        return this.state.filtering;
+    }
+    get condition() {
+        return this.expression.condition;
+    }
+    #setDefaultExpression() {
+        this.expression = this.filterController.getDefaultExpression(this.column);
+    }
+    #removeExpression(expression) {
+        this.filterController.removeExpression(expression);
+    }
+    async #show() {
+        this.active = true;
+        await this.updateComplete;
+        this.input?.select();
+    }
+    #handleConditionChanged(event) {
+        event.stopPropagation();
+        const key = event.detail.value;
+        this.expression.condition = getFilterOperandsFor(this.column)[key];
+        if (this.input.value || this.expression.condition.unary) {
+            this.filterController.filterWithEvent(this.expression, 'modify');
+        }
+        this.requestUpdate();
+    }
+    #handleInput(event) {
+        event.stopPropagation();
+        const value = this.isNumeric ? Number.parseFloat(event.detail) : event.detail;
+        const shouldUpdate = this.isNumeric ? !Number.isNaN(value) : !!value;
+        const type = this.filterController.get(this.expression.key)?.has(this.expression)
+            ? 'modify'
+            : 'add';
+        if (shouldUpdate) {
+            this.expression.searchTerm = value;
+            this.filterController.filterWithEvent(this.expression, type);
+        }
+        else {
+            this.#removeExpression(this.expression);
+        }
+        this.requestUpdate();
+    }
+    #handleKeydown(event) {
+        event.stopPropagation();
+        switch (event.key) {
+            case 'Enter':
+                this.input.value = '';
+                this.#setDefaultExpression();
+                return;
+            case 'Escape':
+                this.active = false;
+                return;
+            default:
+                return;
+        }
+    }
+    #handleResetClick() {
+        this.filterController.removeAllExpressions(this.column.key);
+        this.requestUpdate();
+    }
+    #openDropdownList() {
+        this.dropdown.toggle(this.input);
+    }
+    activeChanged() {
+        this.style.display = this.active ? 'flex' : '';
+        if (!this.active) {
+            this.column = DEFAULT_COLUMN_CONFIG;
+        }
+        this.state.host.requestUpdate();
+    }
+    #chipCriteriaFor(expression) {
+        return async (e) => {
+            e.stopPropagation();
+            expression.criteria = expression.criteria === 'and' ? 'or' : 'and';
+            this.filterController.filterWithEvent(expression, 'modify');
+            this.requestUpdate();
+        };
+    }
+    #chipSelectFor(expression) {
+        return async (e) => {
+            e.stopPropagation();
+            this.expression = expression;
+            await this.updateComplete;
+            this.input?.select();
+        };
+    }
+    #chipRemoveFor(expression) {
+        return async (e) => {
+            e.stopPropagation();
+            this.#removeExpression(expression);
+            if (this.active && this.expression === expression) {
+                this.#setDefaultExpression();
+                await this.updateComplete;
+                this.input.focus();
+            }
+            this.requestUpdate();
+        };
+    }
+    renderCriteriaButton(expr, index) {
+        return index
+            ? 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>`;
+    }
+    renderActiveChips() {
+        const state = this.filterController.get(this.column.key);
+        return !state
+            ? nothing
+            : Array.from(state).map((expression, idx) => {
+                const props = {
+                    expression,
+                    selected: this.expression === expression,
+                    onRemove: this.#chipRemoveFor(expression),
+                    onSelect: this.#chipSelectFor(expression),
+                };
+                return html `${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(props)}`;
+            });
+    }
+    renderFilterActions() {
+        return html `
+      <igc-button
+        id="reset"
+        variant="flat"
+        @click=${this.#handleResetClick}
+      >
+        ${prefixedIcon('refresh')} Reset
+      </igc-button>
+      <igc-button
+        id="close"
+        variant="flat"
+        @click=${() => {
+            this.active = false;
+        }}
+      >
+        ${prefixedIcon('close')} Close
+      </igc-button>
+    `;
+    }
+    renderDropdown() {
+        return html `<igc-dropdown
+      flip
+      same-width
+      @igcChange=${this.#handleConditionChanged}
+    >
+      ${Object.entries(getFilterOperandsFor(this.column)).map(([key, operand]) => html `
+          <igc-dropdown-item
+            .value=${key}
+            ?selected=${this.condition.name === key}
+          >
+            ${prefixedIcon(key)}${operand?.label ?? key}
+          </igc-dropdown-item>
+        `)}
+    </igc-dropdown>`;
+    }
+    renderDropdownTarget() {
+        return html `<igc-icon
+      id="condition"
+      slot="prefix"
+      collection="internal"
+      .name=${this.condition.name}
+      @click=${this.#openDropdownList}
+    >
+    </igc-icon>`;
+    }
+    renderInputArea() {
+        return html `<igc-input
+        outlined
+        value=${ifDefined(this.expression.searchTerm)}
+        placeholder="Add filter value"
+        ?readonly=${this.condition.unary}
+        @igcInput=${this.#handleInput}
+        @keydown=${this.#handleKeydown}
+      >
+        ${this.renderDropdownTarget()}
+      </igc-input>
+      ${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> `;
+    }
+    renderInactiveChips(column, state) {
+        return Array.from(state).map((expression, idx) => {
+            const props = {
+                expression,
+                selected: false,
+                onRemove: this.#chipRemoveFor(expression),
+                onSelect: async (e) => {
+                    e.stopPropagation();
+                    this.column = column;
+                    this.expression = expression;
+                    this.#show();
+                },
+            };
+            return html `${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(props)}`;
+        });
+    }
+    renderFilterState(column) {
+        const state = this.filterController.get(column.key);
+        const partial = state && state.length < 3;
+        const hidden = state && state.length >= 3;
+        const open = () => {
+            this.column = column;
+            this.#setDefaultExpression();
+            this.#show();
+        };
+        const count = hidden ? html `<span slot="suffix">${state.length}</span>` : nothing;
+        const chip = html `<igc-chip
+      data-column=${column.key}
+      @click=${open}
+      >${prefixedIcon('filter')}Filter${count}</igc-chip
+    >`;
+        return partial ? this.renderInactiveChips(column, state) : chip;
+    }
+    renderInactiveState() {
+        return this.state.host.columns.map((column) => column.hidden
+            ? nothing
+            : 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 }),
+    property({ attribute: false })
+], IgcFilterRow.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcFilterRow.prototype, "active", void 0);
+__decorate([
+    query(IgcInputComponent.tagName)
+], IgcFilterRow.prototype, "input", void 0);
+__decorate([
+    query('#condition')
+], IgcFilterRow.prototype, "conditionElement", void 0);
+__decorate([
+    query(IgcDropdownComponent.tagName)
+], IgcFilterRow.prototype, "dropdown", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcFilterRow.prototype, "column", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcFilterRow.prototype, "expression", void 0);
+__decorate([
+    watch('active', { waitUntilFirstUpdate: true })
+], IgcFilterRow.prototype, "activeChanged", null);
+//# sourceMappingURL=filter-row.js.map

package/components/filter-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-row.js","sourceRoot":"","sources":["../../src/components/filter-row.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport {\n  IgcDropdownComponent,\n  type IgcDropdownItemComponent,\n  type IgcIconComponent,\n  IgcInputComponent,\n} from 'igniteui-webcomponents';\nimport { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_FILTER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { getFilterOperandsFor } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpressionTree } from '../operations/filter/tree.js';\nimport type { FilterExpression, FilterOperation, OperandKeys } from '../operations/filter/types.js';\nimport { styles } from '../styles/filter-row/filter-row.css.js';\n\ntype ExpressionChipProps<T> = {\n  expression: FilterExpression<T>;\n  selected: boolean;\n  onRemove: (e: Event) => Promise<void>;\n  onSelect: (e: Event) => Promise<void>;\n};\n\nfunction prefixedIcon(icon?: string) {\n  return html`<igc-icon\n    slot=\"prefix\"\n    name=${ifDefined(icon)}\n    collection=\"internal\"\n  ></igc-icon>`;\n}\n\nexport default class IgcFilterRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_FILTER_ROW_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(IgcFilterRow);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  protected get isNumeric() {\n    return this.column.type === 'number';\n  }\n\n  protected get filterController() {\n    return this.state.filtering;\n  }\n\n  protected get condition() {\n    return this.expression.condition as FilterOperation<T>;\n  }\n\n  @property({ attribute: false })\n  public active = false;\n\n  @query(IgcInputComponent.tagName)\n  public input!: IgcInputComponent;\n\n  @query('#condition')\n  public conditionElement!: IgcIconComponent;\n\n  @query(IgcDropdownComponent.tagName)\n  public dropdown!: IgcDropdownComponent;\n\n  @property({ attribute: false })\n  public column: ColumnConfiguration<T> = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public expression!: FilterExpression<T>;\n\n  #setDefaultExpression() {\n    this.expression = this.filterController.getDefaultExpression(this.column);\n  }\n\n  #removeExpression(expression: FilterExpression<T>) {\n    this.filterController.removeExpression(expression);\n  }\n\n  async #show() {\n    this.active = true;\n\n    await this.updateComplete;\n    this.input?.select();\n  }\n\n  #handleConditionChanged(event: CustomEvent<IgcDropdownItemComponent>) {\n    event.stopPropagation();\n    const key = event.detail.value as OperandKeys<T[typeof this.column.key]>;\n\n    // XXX: Types\n    this.expression.condition = (getFilterOperandsFor(this.column) as any)[key] as FilterOperation<\n      T[keyof T]\n    >;\n\n    if (this.input.value || this.expression.condition.unary) {\n      this.filterController.filterWithEvent(this.expression, 'modify');\n    }\n\n    this.requestUpdate();\n  }\n\n  #handleInput(event: CustomEvent<string>) {\n    event.stopPropagation();\n\n    const value = this.isNumeric ? Number.parseFloat(event.detail) : event.detail;\n    const shouldUpdate = this.isNumeric ? !Number.isNaN(value as number) : !!value;\n    const type = this.filterController.get(this.expression.key)?.has(this.expression)\n      ? 'modify'\n      : 'add';\n\n    if (shouldUpdate) {\n      this.expression.searchTerm = value as any;\n\n      this.filterController.filterWithEvent(this.expression, type);\n    } else {\n      this.#removeExpression(this.expression);\n    }\n\n    this.requestUpdate();\n  }\n\n  #handleKeydown(event: KeyboardEvent) {\n    event.stopPropagation();\n\n    switch (event.key) {\n      case 'Enter':\n        this.input.value = '';\n        this.#setDefaultExpression();\n        return;\n      case 'Escape':\n        this.active = false;\n        return;\n      default:\n        return;\n    }\n  }\n\n  #handleResetClick() {\n    this.filterController.removeAllExpressions(this.column.key);\n    this.requestUpdate();\n  }\n\n  #openDropdownList() {\n    this.dropdown.toggle(this.input);\n  }\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected activeChanged() {\n    this.style.display = this.active ? 'flex' : '';\n\n    if (!this.active) {\n      this.column = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n    }\n\n    this.state.host.requestUpdate();\n  }\n\n  #chipCriteriaFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n\n      expression.criteria = expression.criteria === 'and' ? 'or' : 'and';\n      this.filterController.filterWithEvent(expression, 'modify');\n      this.requestUpdate();\n    };\n  }\n\n  #chipSelectFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.expression = expression;\n      await this.updateComplete;\n      this.input?.select();\n    };\n  }\n\n  #chipRemoveFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.#removeExpression(expression);\n\n      if (this.active && this.expression === expression) {\n        this.#setDefaultExpression();\n        await this.updateComplete;\n        this.input.focus();\n      }\n\n      this.requestUpdate();\n    };\n  }\n\n  protected renderCriteriaButton(expr: FilterExpression<T>, index: number) {\n    return index\n      ? html`<igc-button\n          variant=\"flat\"\n          @click=${this.#chipCriteriaFor(expr)}\n        >\n          ${expr.criteria}\n        </igc-button>`\n      : nothing;\n  }\n\n  protected renderExpressionChip(props: ExpressionChipProps<T>) {\n    const { name, unary } = props.expression.condition as FilterOperation<T>;\n    const { searchTerm: term } = props.expression;\n\n    const prefix = html`<span slot=\"select\"></span>${prefixedIcon(name)}`;\n\n    return html`<igc-chip\n      selectable\n      removable\n      ?selected=${props.selected}\n      @igcRemove=${props.onRemove}\n      @igcSelect=${props.onSelect}\n    >\n      ${prefix}${unary ? name : term}\n    </igc-chip>`;\n  }\n\n  protected renderActiveChips() {\n    const state = this.filterController.get(this.column.key);\n\n    return !state\n      ? nothing\n      : Array.from(state).map((expression, idx) => {\n          const props: ExpressionChipProps<T> = {\n            expression,\n            selected: this.expression === expression,\n            onRemove: this.#chipRemoveFor(expression),\n            onSelect: this.#chipSelectFor(expression),\n          };\n\n          return html`${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(\n            props\n          )}`;\n        });\n  }\n\n  protected renderFilterActions() {\n    return html`\n      <igc-button\n        id=\"reset\"\n        variant=\"flat\"\n        @click=${this.#handleResetClick}\n      >\n        ${prefixedIcon('refresh')} Reset\n      </igc-button>\n      <igc-button\n        id=\"close\"\n        variant=\"flat\"\n        @click=${() => {\n          this.active = false;\n        }}\n      >\n        ${prefixedIcon('close')} Close\n      </igc-button>\n    `;\n  }\n\n  protected renderDropdown() {\n    return html`<igc-dropdown\n      flip\n      same-width\n      @igcChange=${this.#handleConditionChanged}\n    >\n      ${Object.entries(getFilterOperandsFor(this.column)).map(\n        ([key, operand]) => html`\n          <igc-dropdown-item\n            .value=${key}\n            ?selected=${this.condition.name === key}\n          >\n            ${prefixedIcon(key)}${operand?.label ?? key}\n          </igc-dropdown-item>\n        `\n      )}\n    </igc-dropdown>`;\n  }\n\n  protected renderDropdownTarget() {\n    return html`<igc-icon\n      id=\"condition\"\n      slot=\"prefix\"\n      collection=\"internal\"\n      .name=${this.condition.name}\n      @click=${this.#openDropdownList}\n    >\n    </igc-icon>`;\n  }\n\n  protected renderInputArea() {\n    return html`<igc-input\n        outlined\n        value=${ifDefined(this.expression.searchTerm)}\n        placeholder=\"Add filter value\"\n        ?readonly=${this.condition.unary}\n        @igcInput=${this.#handleInput}\n        @keydown=${this.#handleKeydown}\n      >\n        ${this.renderDropdownTarget()}\n      </igc-input>\n      ${this.renderDropdown()}`;\n  }\n\n  protected renderActiveState() {\n    return html`<div part=\"active-state\">\n      <div part=\"filter-row-input\">${this.renderInputArea()}</div>\n      <div part=\"filter-row-filters\">${this.renderActiveChips()}</div>\n      <div part=\"filter-row-actions\">${this.renderFilterActions()}</div>\n    </div> `;\n  }\n\n  protected renderInactiveChips(column: ColumnConfiguration<T>, state: FilterExpressionTree<T>) {\n    return Array.from(state).map((expression, idx) => {\n      const props: ExpressionChipProps<T> = {\n        expression,\n        selected: false,\n        onRemove: this.#chipRemoveFor(expression),\n        onSelect: async (e: Event) => {\n          e.stopPropagation();\n          this.column = column;\n          this.expression = expression;\n          this.#show();\n        },\n      };\n\n      return html`${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(props)}`;\n    });\n  }\n\n  protected renderFilterState(column: ColumnConfiguration<T>) {\n    const state = this.filterController.get(column.key);\n\n    const partial = state && state.length < 3;\n    const hidden = state && state.length >= 3;\n\n    const open = () => {\n      this.column = column;\n      this.#setDefaultExpression();\n      this.#show();\n    };\n\n    const count = hidden ? html`<span slot=\"suffix\">${state.length}</span>` : nothing;\n    const chip = html`<igc-chip\n      data-column=${column.key}\n      @click=${open}\n      >${prefixedIcon('filter')}Filter${count}</igc-chip\n    >`;\n\n    return partial ? this.renderInactiveChips(column, state) : chip;\n  }\n\n  protected renderInactiveState() {\n    return this.state.host.columns.map((column) =>\n      column.hidden\n        ? nothing\n        : html`<div part=\"filter-row-preview\">\n            ${column.filter ? this.renderFilterState(column) : nothing}\n          </div>`\n    );\n  }\n\n  protected override render() {\n    return html`${this.active ? this.renderActiveState() : this.renderInactiveState()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcFilterRow.tagName]: IgcFilterRow<object>;\n  }\n}\n"]}