igniteui-grid-lite 0.0.1 → 0.1.0

package/components/filter-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-row.js","sourceRoot":"","sources":["../../src/components/filter-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EACL,oBAAoB,EAGpB,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAwB,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,wCAAwC,CAAC;AAShE,SAAS,YAAY,CAAC,IAAa;IACjC,OAAO,IAAI,CAAA;;WAEF,SAAS,CAAC,IAAI,CAAC;;eAEX,CAAC;AAChB,CAAC;AAED,MAAM,CAAC,OAAO,OAAO,YAA+B,SAAQ,UAAU;IAAtE;;QA4BS,WAAM,GAAG,KAAK,CAAC;QAYf,WAAM,GAA2B,qBAA+C,CAAC;IA2S1F,CAAC;IAlVQ,MAAM,KAAK,OAAO;QACvB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;aAEsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAClC,CAAC;IAMD,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;IACvC,CAAC;IAED,IAAc,gBAAgB;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;IAC9B,CAAC;IAED,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,UAAU,CAAC,SAA+B,CAAC;IACzD,CAAC;IAoBD,qBAAqB;QACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5E,CAAC;IAED,iBAAiB,CAAC,UAA+B;QAC/C,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC;IAED,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;IACvB,CAAC;IAED,uBAAuB,CAAC,KAA4C;QAClE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,KAA+C,CAAC;QAGzE,IAAI,CAAC,UAAU,CAAC,SAAS,GAAI,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAS,CAAC,GAAG,CAEzE,CAAC;QAEF,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;YACxD,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACnE,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,YAAY,CAAC,KAA0B;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QAC9E,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC/E,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YAC/E,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,KAAK,CAAC;QAEV,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,KAAY,CAAC;YAE1C,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,cAAc,CAAC,KAAoB;QACjC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBACtB,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC7B,OAAO;YACT,KAAK,QAAQ;gBACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,OAAO;YACT;gBACE,OAAO;QACX,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5D,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAGS,aAAa;QACrB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,MAAM,GAAG,qBAA+C,CAAC;QAChE,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAClC,CAAC;IAED,gBAAgB,CAAC,UAA+B;QAC9C,OAAO,KAAK,EAAE,CAAQ,EAAE,EAAE;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YACnE,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAC5D,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,UAA+B;QAC5C,OAAO,KAAK,EAAE,CAAQ,EAAE,EAAE;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;YAC7B,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,UAA+B;QAC5C,OAAO,KAAK,EAAE,CAAQ,EAAE,EAAE;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;YAEnC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC;gBAClD,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC7B,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;YAED,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC;IAES,oBAAoB,CAAC,IAAyB,EAAE,KAAa;QACrE,OAAO,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;mBAEO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;;YAElC,IAAI,CAAC,QAAQ;sBACH;YAChB,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAES,oBAAoB,CAAC,KAA6B;QAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,SAA+B,CAAC;QACzE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;QAE9C,MAAM,MAAM,GAAG,IAAI,CAAA,8BAA8B,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QAEtE,OAAO,IAAI,CAAA;;;kBAGG,KAAK,CAAC,QAAQ;mBACb,KAAK,CAAC,QAAQ;mBACd,KAAK,CAAC,QAAQ;;QAEzB,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;gBACpB,CAAC;IACf,CAAC;IAES,iBAAiB;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAEzD,OAAO,CAAC,KAAK;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE;gBACxC,MAAM,KAAK,GAA2B;oBACpC,UAAU;oBACV,QAAQ,EAAE,IAAI,CAAC,UAAU,KAAK,UAAU;oBACxC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;oBACzC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;iBAC1C,CAAC;gBAEF,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAClF,KAAK,CACN,EAAE,CAAC;YACN,CAAC,CAAC,CAAC;IACT,CAAC;IAES,mBAAmB;QAC3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,iBAAiB;;UAE7B,YAAY,CAAC,SAAS,CAAC;;;;;iBAKhB,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;;UAEC,YAAY,CAAC,OAAO,CAAC;;KAE1B,CAAC;IACJ,CAAC;IAES,cAAc;QACtB,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,uBAAuB;;QAEvC,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CACrD,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;qBAEX,GAAG;wBACA,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,GAAG;;cAErC,YAAY,CAAC,GAAG,CAAC,GAAG,OAAO,EAAE,KAAK,IAAI,GAAG;;SAE9C,CACF;oBACa,CAAC;IACnB,CAAC;IAES,oBAAoB;QAC5B,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,SAAS,CAAC,IAAI;eAClB,IAAI,CAAC,iBAAiB;;gBAErB,CAAC;IACf,CAAC;IAES,eAAe;QACvB,OAAO,IAAI,CAAA;;gBAEC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;;oBAEjC,IAAI,CAAC,SAAS,CAAC,KAAK;oBACpB,IAAI,CAAC,YAAY;mBAClB,IAAI,CAAC,cAAc;;UAE5B,IAAI,CAAC,oBAAoB,EAAE;;QAE7B,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;IAC9B,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA;qCACsB,IAAI,CAAC,eAAe,EAAE;uCACpB,IAAI,CAAC,iBAAiB,EAAE;uCACxB,IAAI,CAAC,mBAAmB,EAAE;YACrD,CAAC;IACX,CAAC;IAES,mBAAmB,CAAC,MAA8B,EAAE,KAA8B;QAC1F,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE;YAC/C,MAAM,KAAK,GAA2B;gBACpC,UAAU;gBACV,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;gBACzC,QAAQ,EAAE,KAAK,EAAE,CAAQ,EAAE,EAAE;oBAC3B,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;oBACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;oBAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,CAAC;aACF,CAAC;YAEF,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC;QAChG,CAAC,CAAC,CAAC;IACL,CAAC;IAES,iBAAiB,CAAC,MAA8B;QACxD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAEpD,MAAM,OAAO,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1C,MAAM,MAAM,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;QAE1C,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,KAAK,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;QAClF,MAAM,IAAI,GAAG,IAAI,CAAA;oBACD,MAAM,CAAC,GAAG;eACf,IAAI;SACV,YAAY,CAAC,QAAQ,CAAC,SAAS,KAAK;MACvC,CAAC;QAEH,OAAO,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAClE,CAAC;IAES,mBAAmB;QAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAC5C,MAAM,CAAC,MAAM;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;cACA,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO;iBACrD,CACZ,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;IACtF,CAAC;;AArUM;IAFN,OAAO,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACvD,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CACG;AAe3B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACT;AAGf;IADN,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC;2CACA;AAG1B;IADN,KAAK,CAAC,YAAY,CAAC;sDACuB;AAGpC;IADN,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC;8CACG;AAGhC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACyD;AAGjF;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gDACS;AA+E9B;IADT,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;iDAS/C","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"]}
+{"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 type { StateController } from '../controllers/state.js';\nimport { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';\nimport { GRID_STATE_CONTEXT } from '../internal/context.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`\n    <igc-icon\n      slot=\"prefix\"\n      name=${ifDefined(icon)}\n      collection=\"internal\"\n    ></igc-icon>\n  `;\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: GRID_STATE_CONTEXT, 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`\n          <igc-button\n            variant=\"flat\"\n            @click=${this.#chipCriteriaFor(expr)}\n          >\n            ${expr.criteria}\n          </igc-button>\n        `\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`\n      <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\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`\n      <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\n  protected renderActiveState() {\n    return html`\n      <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\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.columns.map((column) =>\n      column.hidden\n        ? nothing\n        : html`\n            <div part=\"filter-row-preview\">\n              ${column.filter ? this.renderFilterState(column) : nothing}\n            </div>\n          `\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"]}

package/components/grid.d.ts

@@ -1,16 +1,10 @@
 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 type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
-import type { ColumnConfiguration, DataPipelineConfiguration, GridSortConfiguration, Keys } from '../internal/types.js';
+import type { ColumnConfiguration, DataPipelineConfiguration, GridLiteSortingOptions, 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 type { SortingExpression } from '../operations/sort/types.js';
 import IgcGridLiteRow from './row.js';
-import IgcVirtualizer from './virtualizer.js';
 /**
  * Event object for the filtering event of the grid.
  */
@@ -61,14 +55,14 @@ export interface IgcGridLiteEventMap<T extends object> {
      *
      * @event
      */
-    sorting: CustomEvent<SortExpression<T>>;
+    sorting: CustomEvent<SortingExpression<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>>;
+    sorted: CustomEvent<SortingExpression<T>>;
     /**
      * Emitted when filtering is initiated through the UI.
      *
@@ -103,23 +97,24 @@ export interface IgcGridLiteEventMap<T extends object> {
  */
 export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteEventMap<T>> {
     static get tagName(): "igc-grid-lite";
-    static styles: import("lit").CSSResult;
+    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>;
+    protected readonly _stateController: import("../controllers/state.js").StateController<T>;
+    protected readonly _domController: import("../controllers/dom.js").GridDOMController<T>;
+    protected readonly _dataController: import("../controllers/data-operation.js").DataOperationsController<T>;
+    protected readonly _stateProvider: ContextProvider<{
+        __context__: import("../controllers/state.js").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>>;
+    protected readonly _columnUpdateProvider: ContextProvider<{
+        __context__: (config: import("../index.js").BaseColumnConfiguration<object>) => void;
+    }, this>;
+    private _initialSortExpressions;
+    private _initialFilterExpressions;
+    private _updateObservers;
+    private _updateConfiguration;
+    protected _dataState: T[];
     /** The data source for the grid. */
-    data: Array<T>;
+    data: T[];
     /**
      * Whether the grid will try to "resolve" its column configuration based on the passed
      * data source.
@@ -146,7 +141,7 @@ export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcG
      */
     autoGenerate: boolean;
     /** Sort configuration property for the grid. */
-    sortConfiguration: GridSortConfiguration;
+    sortingOptions: GridLiteSortingOptions;
     /**
      * Configuration object which controls remote data operations for the grid.
      */
@@ -154,11 +149,11 @@ export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcG
     /**
      * Set the sort state for the grid.
      */
-    set sortExpressions(expressions: SortExpression<T>[]);
+    set sortingExpressions(expressions: SortingExpression<T>[]);
     /**
      * Get the sort state for the grid.
      */
-    get sortExpressions(): SortExpression<T>[];
+    get sortingExpressions(): SortingExpression<T>[];
     /**
      * Set the filter state for the grid.
      */
@@ -167,6 +162,7 @@ export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcG
      * Get the filter state for the grid.
      */
     get filterExpressions(): FilterExpression<T>[];
+    get columns(): ColumnConfiguration<T>[];
     /**
      * Returns the collection of rendered row elements in the grid.
      *
@@ -184,10 +180,13 @@ export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcG
      * 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();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(): void;
+    private _hasAssignedColumns;
+    private _handleSlotChange;
     /**
      * Performs a filter operation in the grid based on the passed expression(s).
      */
@@ -195,7 +194,7 @@ export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcG
     /**
      * Performs a sort operation in the grid based on the passed expression(s).
      */
-    sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
+    sort(expressions: SortingExpression<T> | SortingExpression<T>[]): void;
     /**
      * Resets the current sort state of the control.
      */
@@ -212,11 +211,12 @@ export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcG
      * 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 _bodyClickHandler(event: PointerEvent): void;
+    protected _bodyKeydownHandler(event: KeyboardEvent): void;
+    protected _renderRow: RenderItemFunction<T>;
+    protected _renderHeaderRow(): import("lit-html").TemplateResult<1>;
+    protected _renderBody(): import("lit-html").TemplateResult<1>;
+    protected _renderFilterRow(): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/grid.js

@@ -7,21 +7,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { eventOptions, property, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.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 { createDataOperationsController } from '../controllers/data-operation.js';
+import { createDomController } from '../controllers/dom.js';
+import { createStateController } from '../controllers/state.js';
+import { PIPELINE } from '../internal/constants.js';
+import { COLUMN_UPDATE_CONTEXT, GRID_STATE_CONTEXT } from '../internal/context.js';
+import { getElementFromEventPath } from '../internal/element-from-event-path.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 { asArray, getFilterOperandsFor, isNumber, isString } 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 { styles } from '../styles/themes/grid.base.css.js';
+import { all } from '../styles/themes/grid-themes.js';
+import { styles as shared } from '../styles/themes/shared/grid.common.css.js';
 import IgcGridLiteCell from './cell.js';
+import { IgcGridLiteColumn } from './column.js';
 import IgcFilterRow from './filter-row.js';
 import IgcGridLiteHeaderRow from './header-row.js';
 import IgcGridLiteRow from './row.js';
@@ -30,170 +35,208 @@ export class IgcGridLite extends EventEmitterBase {
     static get tagName() {
         return GRID_TAG;
     }
-    static { this.styles = styles; }
+    static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcGridLite, IgcVirtualizer, IgcGridLiteRow, IgcGridLiteHeaderRow, IgcFilterRow, IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent);
+        registerComponent(IgcGridLite, IgcGridLiteColumn, IgcVirtualizer, IgcGridLiteRow, IgcGridLiteHeaderRow, IgcFilterRow, IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent);
     }
-    set sortExpressions(expressions) {
-        if (expressions.length) {
+    _updateObservers() {
+        this._stateProvider.updateObservers();
+    }
+    _updateConfiguration(config) {
+        this._stateController.updateColumnsConfiguration(asArray(config));
+    }
+    set sortingExpressions(expressions) {
+        if (this.hasUpdated && expressions.length) {
             this.sort(expressions);
         }
+        else {
+            this._initialSortExpressions = expressions;
+        }
     }
-    get sortExpressions() {
-        return Array.from(this.stateController.sorting.state.values());
+    get sortingExpressions() {
+        return Array.from(this._stateController.sorting.state.values());
     }
     set filterExpressions(expressions) {
-        if (expressions.length) {
+        if (this.hasUpdated && expressions.length) {
             this.filter(expressions);
         }
+        else {
+            this._initialFilterExpressions = expressions;
+        }
     }
     get filterExpressions() {
-        const expressions = [];
-        for (const each of this.stateController.filtering.state.values) {
-            expressions.push(...each.all);
-        }
-        return expressions;
+        return this._stateController.filtering.state.values.flatMap((each) => each.all);
+    }
+    get columns() {
+        return this._stateController.columns.map((col) => ({ ...col }));
     }
     get rows() {
-        return Array.from(this._rows);
+        return this._stateController.rows;
     }
     get dataView() {
-        return this.dataState;
+        return this._dataState;
     }
     get totalItems() {
-        return this.dataState.length;
-    }
-    watchColumns(_, newConfig = []) {
-        this.columns = newConfig.map((config) => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));
+        return this._dataState.length;
     }
     dataChanged() {
-        this.dataState = structuredClone(this.data);
-        autoGenerateColumns(this);
+        this._dataState = [...this.data];
         if (this.hasUpdated) {
+            if (!this._hasAssignedColumns()) {
+                this._stateController.setAutoColumnConfiguration();
+            }
             this.pipeline();
         }
     }
     async pipeline() {
-        this.dataState = await this.dataController.apply(structuredClone(this.data), this.stateController);
+        this._dataState = await this._dataController.apply([...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._stateController = createStateController(this, this._updateObservers);
+        this._domController = createDomController(this, this._stateController);
+        this._dataController = createDataOperationsController(this);
+        this._stateProvider = new ContextProvider(this, {
+            context: GRID_STATE_CONTEXT,
+            initialValue: this._stateController,
         });
-        this.dataState = [];
-        this.columns = [];
+        this._columnUpdateProvider = new ContextProvider(this, {
+            context: COLUMN_UPDATE_CONTEXT,
+            initialValue: ((config) => {
+                this._updateConfiguration(config);
+            }),
+        });
+        this._initialSortExpressions = [];
+        this._initialFilterExpressions = [];
+        this._dataState = [];
         this.data = [];
         this.autoGenerate = false;
-        this.sortConfiguration = {
-            multiple: true,
-            triState: true,
+        this.sortingOptions = {
+            mode: 'multiple',
+        };
+        this._renderRow = (item, index) => {
+            const styles = {
+                ...this._domController.columnSizes,
+                ...this._domController.getActiveRowStyles(index),
+            };
+            const activeNode = this._stateController.active;
+            return html `
+      <igc-grid-lite-row
+        part="row"
+        exportparts="cell"
+        style=${styleMap(styles)}
+        .index=${index}
+        .activeNode=${activeNode}
+        .data=${item}
+        .columns=${this._stateController.columns}
+      ></igc-grid-lite-row>
+    `;
         };
         addThemingController(this, all);
     }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', this._handleSlotChange.bind(this));
+        return root;
+    }
+    firstUpdated() {
+        this.updateComplete.then(() => {
+            if (this.autoGenerate && !this._hasAssignedColumns()) {
+                this._stateController.setAutoColumnConfiguration();
+            }
+            if (this._initialFilterExpressions.length) {
+                this.filter(this._initialFilterExpressions);
+            }
+            if (this._initialSortExpressions.length) {
+                this.sort(this._initialSortExpressions);
+            }
+        });
+    }
+    _hasAssignedColumns() {
+        const slot = this.renderRoot.querySelector('slot');
+        const assignedNodes = slot
+            .assignedElements({ flatten: true })
+            .filter((element) => element.matches(IgcGridLiteColumn.tagName));
+        return assignedNodes.length > 0;
+    }
+    _handleSlotChange(event) {
+        const slot = event.target;
+        const assignedNodes = slot
+            .assignedElements({ flatten: true })
+            .filter((element) => element.matches(IgcGridLiteColumn.tagName));
+        this._stateController.setColumnConfiguration(assignedNodes);
+    }
     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],
-                })
+        this._stateController.filtering.filter(asArray(config).map((each) => isString(each.condition)
+            ? Object.assign(each, {
+                condition: getFilterOperandsFor(this.getColumn(each.key))[each.condition],
+            })
             : each));
     }
     sort(expressions) {
-        this.stateController.sorting.sort(expressions);
+        this._stateController.sorting.sort(expressions);
     }
     clearSort(key) {
-        this.stateController.sorting.reset(key);
+        this._stateController.sorting.reset(key);
         this.requestUpdate(PIPELINE);
     }
     clearFilter(key) {
-        this.stateController.filtering.reset(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);
+        return this._stateController.columns.find((column, index) => isNumber(id) ? index === id : column.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);
+        this._stateController.updateColumnsConfiguration(asArray(columns));
     }
-    bodyClickHandler(event) {
-        const target = event
-            .composedPath()
-            .find((el) => el instanceof IgcGridLiteCell);
+    _bodyClickHandler(event) {
+        const target = getElementFromEventPath(IgcGridLiteCell.tagName, event);
         if (target) {
-            this.stateController.active = {
-                column: target.column.key,
-                row: target.row.index,
-            };
+            this._stateController.active = { column: target.column.key, row: target.row.index };
         }
     }
-    bodyKeydownHandler(event) {
-        if (this.scrollContainer.isSameNode(event.target)) {
-            this.stateController.navigation.navigate(event);
+    _bodyKeydownHandler(event) {
+        if (event.target === this._stateController.virtualizer) {
+            this._stateController.navigation.navigate(event);
         }
     }
-    renderHeaderRow() {
+    _renderHeaderRow() {
         return html `
       <igc-grid-lite-header-row
-      style=${styleMap(this.DOM.columnSizes)}
-      .columns=${this.columns}
+        tabindex="0"
+        style=${styleMap(this._domController.columnSizes)}
+        .columns=${this._stateController.columns}
       ></igc-grid-lite-header-row>
     `;
     }
-    renderBody() {
+    _renderBody() {
         return html `
       <igc-virtualizer
-        .items=${this.dataState}
-        .renderItem=${this.DOM.rowRenderer}
-        @click=${this.bodyClickHandler}
-        @keydown=${this.bodyKeydownHandler}
+        tabindex="0"
+        .items=${this._dataState}
+        .renderItem=${this._renderRow}
+        @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;
+    _renderFilterRow() {
+        return html `${cache(this._stateController.columns.some((column) => column.filter)
+            ? html `<igc-filter-row style=${styleMap(this._domController.columnSizes)}></igc-filter-row>`
+            : nothing)}`;
     }
     render() {
         return html `
-      ${this.stateController.resizing.renderIndicator()}
-      ${this.renderHeaderRow()}
-      ${this.renderFilterRow()}
-      ${this.renderBody()}
+      <slot part="column-sink"></slot>
+      ${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);
+], IgcGridLite.prototype, "_dataState", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcGridLite.prototype, "data", void 0);
@@ -202,19 +245,16 @@ __decorate([
 ], IgcGridLite.prototype, "autoGenerate", void 0);
 __decorate([
     property({ attribute: false })
-], IgcGridLite.prototype, "sortConfiguration", void 0);
+], IgcGridLite.prototype, "sortingOptions", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcGridLite.prototype, "dataPipelineConfiguration", void 0);
 __decorate([
     property({ attribute: false })
-], IgcGridLite.prototype, "sortExpressions", null);
+], IgcGridLite.prototype, "sortingExpressions", null);
 __decorate([
     property({ attribute: false })
 ], IgcGridLite.prototype, "filterExpressions", null);
-__decorate([
-    watch('columns')
-], IgcGridLite.prototype, "watchColumns", null);
 __decorate([
     watch('data')
 ], IgcGridLite.prototype, "dataChanged", null);
@@ -223,5 +263,5 @@ __decorate([
 ], IgcGridLite.prototype, "pipeline", null);
 __decorate([
     eventOptions({ capture: true })
-], IgcGridLite.prototype, "bodyClickHandler", null);
+], IgcGridLite.prototype, "_bodyClickHandler", null);
 //# sourceMappingURL=grid.js.map