igniteui-grid-lite 0.9.0 → 0.11.0

package/components/cell.d.ts

@@ -1,31 +1,27 @@
 import { LitElement, type PropertyValues } 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;
     private readonly _adoptedStylesController;
+    private readonly _a11y;
     adoptRootStyles: boolean;
     /**
-     * The value which will be rendered by the component.
+     * Position of the cell among the visible columns. Written as its 1-based
+     * `aria-colindex`.
+     *
+     * @internal
      */
+    _colIndex: number;
+    /** The rendered value. */
     value: PropertyType<T>;
-    /**
-     * A reference to the column configuration object.
-     */
+    /** The column configuration. */
     column: ColumnConfiguration<T>;
-    /**
-     * Indicates whether this is the active cell in the grid.
-     *
-     */
+    /** Whether this is the active cell in the grid. */
     active: boolean;
-    /**
-     * The parent row component holding this cell.
-     */
+    /** The parent row. */
     row: IgcGridLiteRow<T>;
     rowIndex: number;
     cellTemplate?: (context: IgcCellContext<T>) => unknown;
@@ -33,7 +29,7 @@ export default class IgcGridLiteCell<T extends object> extends LitElement {
     private get _shouldAdoptStyles();
     connectedCallback(): void;
     protected update(props: PropertyValues<this>): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/cache.js").CacheDirective>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/cell.js

@@ -8,6 +8,7 @@ import { θaddAdoptedStylesController as addAdoptedStylesController } from 'igni
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
+import { addA11y } from '../internal/a11y.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';
@@ -15,7 +16,9 @@ export default class IgcGridLiteCell extends LitElement {
     constructor() {
         super(...arguments);
         this._adoptedStylesController = addAdoptedStylesController(this);
+        this._a11y = addA11y(this, 'gridcell');
         this.adoptRootStyles = false;
+        this._colIndex = -1;
         this.active = false;
         this.rowIndex = -1;
     }
@@ -39,23 +42,31 @@ export default class IgcGridLiteCell extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.tabIndex = -1;
         this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
     }
     update(props) {
-        if (props.has('adoptRootStyles')) {
+        if (props.has('adoptRootStyles') || props.has('cellTemplate')) {
             this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
         }
+        this._a11y.set({
+            ariaColIndex: `${this._colIndex}`,
+            ariaSelected: this.active ? 'true' : null,
+        });
         super.update(props);
     }
     render() {
-        return html `${cache(this.cellTemplate
+        return cache(this.cellTemplate
             ? this.cellTemplate(this.context)
-            : html `<span part="text">${this.value}</span>`)}`;
+            : html `<span part="text">${this.value}</span>`);
     }
 }
 __decorate([
     property({ attribute: false })
 ], IgcGridLiteCell.prototype, "adoptRootStyles", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteCell.prototype, "_colIndex", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcGridLiteCell.prototype, "value", void 0);

package/components/cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell.js","sourceRoot":"","sources":["../../src/components/cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,2BAA2B,IAAI,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACnG,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,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;;QAWmB,6BAAwB,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;QAGtE,oBAAe,GAAG,KAAK,CAAC;QAmBxB,WAAM,GAAG,KAAK,CAAC;QASf,aAAQ,GAAG,CAAC,CAAC,CAAC;IAsCvB,CAAC;IA/EQ,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;IAsCD,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;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC;IAC3D,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3E,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,IAAI,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC3E,CAAC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,KAAK,CACjB,IAAI,CAAC,YAAY;YACf,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAc,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,KAAK,SAAS,CACjD,EAAE,CAAC;IACN,CAAC;;AAjEM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACA;AAMxB;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;AAMf;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACA;AAGxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACV;AAGd;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAC+B","sourcesContent":["import { θaddAdoptedStylesController as addAdoptedStylesController } from 'igniteui-webcomponents';\nimport { html, LitElement, type PropertyValues } 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  private readonly _adoptedStylesController = addAdoptedStylesController(this);\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\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  @property({ attribute: false })\n  public row!: IgcGridLiteRow<T>;\n\n  @property({ attribute: false })\n  public rowIndex = -1;\n\n  @property({ attribute: false })\n  public cellTemplate?: (context: IgcCellContext<T>) => unknown;\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  private get _shouldAdoptStyles(): boolean {\n    return this.adoptRootStyles && this.cellTemplate != null;\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('adoptRootStyles')) {\n      this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n    }\n\n    super.update(props);\n  }\n\n  protected override render() {\n    return html`${cache(\n      this.cellTemplate\n        ? this.cellTemplate(this.context as any)\n        : html`<span part=\"text\">${this.value}</span>`\n    )}`;\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":"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","sourcesContent":["import { θaddAdoptedStylesController as addAdoptedStylesController } from 'igniteui-webcomponents';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { addA11y } from '../internal/a11y.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\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  private readonly _adoptedStylesController = addAdoptedStylesController(this);\n  private readonly _a11y = addA11y(this, 'gridcell');\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  /**\n   * Position of the cell among the visible columns. Written as its 1-based\n   * `aria-colindex`.\n   *\n   * @internal\n   */\n  @property({ attribute: false })\n  public _colIndex = -1;\n\n  /** The rendered value. */\n  @property({ attribute: false })\n  public value!: PropertyType<T>;\n\n  /** The column configuration. */\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  /** Whether this is the active cell in the grid. */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /** The parent row. */\n  @property({ attribute: false })\n  public row!: IgcGridLiteRow<T>;\n\n  @property({ attribute: false })\n  public rowIndex = -1;\n\n  @property({ attribute: false })\n  public cellTemplate?: (context: IgcCellContext<T>) => unknown;\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  private get _shouldAdoptStyles(): boolean {\n    return this.adoptRootStyles && this.cellTemplate != null;\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Roving focus target: focus here announces the cell.\n    this.tabIndex = -1;\n    this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('adoptRootStyles') || props.has('cellTemplate')) {\n      this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n    }\n\n    // The grid has no cell selection. `aria-selected` marks only the active cell.\n    this._a11y.set({\n      ariaColIndex: `${this._colIndex}`,\n      ariaSelected: this.active ? 'true' : null,\n    });\n\n    super.update(props);\n  }\n\n  protected override render() {\n    return cache(\n      this.cellTemplate\n        ? this.cellTemplate(this.context)\n        : html`<span part=\"text\">${this.value}</span>`\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteCell.tagName]: IgcGridLiteCell<object>;\n  }\n}\n"]}

package/components/column.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, type PropertyValues } from 'lit';
-import type { BaseColumnConfiguration, ColumnSortConfiguration, IgcCellContext, IgcHeaderContext, Keys } from '../internal/types.js';
+import type { BaseColumnConfiguration, ColumnSortConfiguration, DataType, IgcCellContext, IgcHeaderContext, Keys } from '../internal/types.js';
 /**
  * @element igc-grid-lite-column
  */
@@ -12,7 +12,7 @@ export declare class IgcGridLiteColumn<T extends object = any> extends LitElemen
     /** The field from the data for this column. */
     field: Keys<T>;
     /** The data type of the column's values. */
-    dataType?: 'number' | 'string' | 'boolean';
+    dataType?: DataType;
     /** The header text of the column. */
     header?: string;
     /** The width of the column. */

package/components/column.js.map

@@ -1 +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,aAAQ,GAAqC,QAAQ,CAAC;QAY7C,WAAM,GAAG,KAAK,CAAC;QAIxB,cAAS,GAAG,KAAK,CAAC;QAIlB,aAAQ,GAAG,KAAK,CAAC;QAIjB,yBAAoB,GAAG,KAAK,CAAC;QAQ7B,eAAU,GAAG,KAAK,CAAC;QAInB,2BAAsB,GAAG,KAAK,CAAC;IAqBxC,CAAC;IAlFQ,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;IA0DkB,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;;AAhES;IADT,OAAO,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,CAAC;qDACwB;AAI7D;IADN,QAAQ,EAAE;gDACY;AAIhB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDACwB;AAItD;IADN,QAAQ,EAAE;iDACY;AAIhB;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,IAAI,EAAE,OAAO,EAAE,CAAC;mDACJ;AAIjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DAC7B;AAI7B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4DACuB;AAI/C;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACF;AAInB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC;iEAC7B;AAI/B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yDACkC;AAI1D;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDACmC","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  ColumnSortConfiguration,\n  IgcCellContext,\n  IgcHeaderContext,\n  Keys,\n} from '../internal/types.js';\n\n/**\n * @element igc-grid-lite-column\n */\nexport class IgcGridLiteColumn<T extends object = any>\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 field from the data for this column. */\n  @property()\n  public field!: Keys<T>;\n\n  /** The data type of the column's values. */\n  @property({ attribute: 'data-type' })\n  public dataType?: 'number' | 'string' | 'boolean' = 'string';\n\n  /** The header text of the column. */\n  @property()\n  public header?: 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  /** Indicates whether the column is sortable. */\n  @property({ type: Boolean })\n  public sortable = false;\n\n  /** Whether sort operations will be case sensitive. */\n  @property({ type: Boolean, attribute: 'sorting-case-sensitive' })\n  public sortingCaseSensitive = false;\n\n  /** Sort configuration for the column (e.g., custom comparer). */\n  @property({ attribute: false })\n  public sortConfiguration?: ColumnSortConfiguration<T>;\n\n  /** Indicates whether the column is filterable. */\n  @property({ type: Boolean })\n  public filterable = false;\n\n  /** Whether filter operations will be case sensitive. */\n  @property({ type: Boolean, attribute: 'filtering-case-sensitive' })\n  public filteringCaseSensitive = 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, any>) => 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;\n  }\n}\n"]}
+{"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;AAatD,MAAM,OAAO,iBACX,SAAQ,UAAU;IADpB;;QA6BS,aAAQ,GAAc,QAAQ,CAAC;QAYtB,WAAM,GAAG,KAAK,CAAC;QAIxB,cAAS,GAAG,KAAK,CAAC;QAIlB,aAAQ,GAAG,KAAK,CAAC;QAIjB,yBAAoB,GAAG,KAAK,CAAC;QAQ7B,eAAU,GAAG,KAAK,CAAC;QAInB,2BAAsB,GAAG,KAAK,CAAC;IAqBxC,CAAC;IAlFQ,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;IA0DkB,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;;AAhES;IADT,OAAO,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,CAAC;qDACwB;AAI7D;IADN,QAAQ,EAAE;gDACY;AAIhB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDACC;AAI/B;IADN,QAAQ,EAAE;iDACY;AAIhB;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,IAAI,EAAE,OAAO,EAAE,CAAC;mDACJ;AAIjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DAC7B;AAI7B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4DACuB;AAI/C;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACF;AAInB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC;iEAC7B;AAI/B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yDACkC;AAI1D;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDACmC","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  ColumnSortConfiguration,\n  DataType,\n  IgcCellContext,\n  IgcHeaderContext,\n  Keys,\n} from '../internal/types.js';\n\n/**\n * @element igc-grid-lite-column\n */\nexport class IgcGridLiteColumn<T extends object = any>\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 field from the data for this column. */\n  @property()\n  public field!: Keys<T>;\n\n  /** The data type of the column's values. */\n  @property({ attribute: 'data-type' })\n  public dataType?: DataType = 'string';\n\n  /** The header text of the column. */\n  @property()\n  public header?: 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  /** Indicates whether the column is sortable. */\n  @property({ type: Boolean })\n  public sortable = false;\n\n  /** Whether sort operations will be case sensitive. */\n  @property({ type: Boolean, attribute: 'sorting-case-sensitive' })\n  public sortingCaseSensitive = false;\n\n  /** Sort configuration for the column (e.g., custom comparer). */\n  @property({ attribute: false })\n  public sortConfiguration?: ColumnSortConfiguration<T>;\n\n  /** Indicates whether the column is filterable. */\n  @property({ type: Boolean })\n  public filterable = false;\n\n  /** Whether filter operations will be case sensitive. */\n  @property({ type: Boolean, attribute: 'filtering-case-sensitive' })\n  public filteringCaseSensitive = 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, any>) => 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;\n  }\n}\n"]}

package/components/filter-row.d.ts

@@ -12,8 +12,9 @@ type ExpressionChipProps<T> = {
 };
 export default class IgcFilterRow<T extends object> extends LitElement {
     #private;
-    static get tagName(): "igc-filter-row";
+    static get tagName(): "igc-grid-lite-filter-row";
     static styles: import("lit").CSSResult;
+    /** Deferred by the grid until a filterable column shows: only this row uses the editors. */
     static register(): void;
     private readonly _adoptedStylesController;
     state: StateController<T>;
@@ -28,6 +29,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {
     expression: FilterExpression<T>;
     adoptRootStyles: boolean;
     constructor();
+    private get _shouldAdoptStyles();
     private _handleThemeChange;
     protected update(props: PropertyValues<this>): void;
     protected activeChanged(): void;
@@ -41,8 +43,8 @@ export default class IgcFilterRow<T extends object> extends LitElement {
     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(): (import("lit-html").TemplateResult<1> | typeof nothing)[];
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected renderInactiveState(): import("lit-html").TemplateResult<1>[];
+    protected render(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<1>[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/filter-row.js

@@ -5,18 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { consume } from '@lit/context';
-import { θaddAdoptedStylesController as addAdoptedStylesController, θaddThemingController as addThemingController, IgcDropdownComponent, IgcInputComponent, } from 'igniteui-webcomponents';
+import { θaddAdoptedStylesController as addAdoptedStylesController, θaddThemingController as addThemingController, IgcButtonComponent, IgcChipComponent, 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 { addA11y, FILTER_ROW_INDEX } from '../internal/a11y.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 { getFilterOperandsFor, resolveCondition, visibleColumns } from '../internal/utils.js';
 import { watch } from '../internal/watch.js';
 import { styles } from '../styles/filter-row/filter-row.css.js';
 import { all } from '../styles/themes/filtering-row-themes.js';
+const MAX_PREVIEW_CHIPS = 3;
+const FILTER_ROW_LABEL = 'Column filters';
 function prefixedIcon(icon) {
     return html `
     <igc-icon
@@ -32,7 +35,7 @@ export default class IgcFilterRow extends LitElement {
     }
     static { this.styles = styles; }
     static register() {
-        registerComponent(IgcFilterRow);
+        registerComponent(IgcFilterRow, IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent);
     }
     get isNumeric() {
         return this.column.dataType === 'number';
@@ -49,37 +52,46 @@ export default class IgcFilterRow extends LitElement {
         this.active = false;
         this.column = DEFAULT_COLUMN_CONFIG;
         this.adoptRootStyles = false;
+        addA11y(this, 'row').set({
+            ariaRowIndex: `${FILTER_ROW_INDEX}`,
+            ariaLabel: FILTER_ROW_LABEL,
+        });
         addThemingController(this, all, {
             themeChange: this._handleThemeChange,
         });
     }
+    get _shouldAdoptStyles() {
+        return this.adoptRootStyles && this.column.headerTemplate != null;
+    }
     _handleThemeChange() {
         this._adoptedStylesController.invalidateCache(this.ownerDocument);
-        this._adoptedStylesController.shouldAdoptStyles(this.adoptRootStyles && this.column.headerTemplate != null);
+        this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
     }
     update(props) {
         if (props.has('adoptRootStyles')) {
-            this._adoptedStylesController.shouldAdoptStyles(this.adoptRootStyles && this.column.headerTemplate != null);
+            this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
         }
         super.update(props);
     }
     #setDefaultExpression() {
         this.expression = this.filterController.getDefaultExpression(this.column);
     }
-    #removeExpression(expression) {
-        this.filterController.removeExpression(expression);
-    }
-    async #show() {
-        this.active = true;
+    async #selectInput() {
         await this.updateComplete;
         this.input?.select();
     }
+    #show() {
+        this.active = true;
+        this.#selectInput();
+    }
     #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');
+        const condition = resolveCondition(this.column, event.detail.value);
+        if (this.input.value || condition.unary) {
+            this.filterController.filterWithEvent({ ...this.expression, condition }, 'modify', this.expression);
+        }
+        else {
+            this.expression.condition = condition;
         }
         this.requestUpdate();
     }
@@ -87,15 +99,14 @@ export default class IgcFilterRow extends LitElement {
         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);
+            const type = this.filterController.get(this.expression.key)?.has(this.expression)
+                ? 'modify'
+                : 'add';
+            this.filterController.filterWithEvent({ ...this.expression, searchTerm: value }, type, this.expression);
         }
         else {
-            this.#removeExpression(this.expression);
+            this.filterController.removeExpression(this.expression);
         }
         this.requestUpdate();
     }
@@ -109,8 +120,6 @@ export default class IgcFilterRow extends LitElement {
             case 'Escape':
                 this.active = false;
                 return;
-            default:
-                return;
         }
     }
     #handleResetClick() {
@@ -120,18 +129,30 @@ export default class IgcFilterRow extends LitElement {
     #openDropdownList() {
         this.dropdown.toggle(this.input);
     }
+    #handleConditionKeydown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.#openDropdownList();
+    }
+    #nameFor(field) {
+        const column = this.state.columns.find((each) => each.field === field);
+        return String(column?.header ?? field);
+    }
     activeChanged() {
         this.style.display = this.active ? 'flex' : '';
         if (!this.active) {
             this.column = DEFAULT_COLUMN_CONFIG;
         }
-        this.state.host.requestUpdate();
+        this.state.updateObservers();
     }
     #chipCriteriaFor(expression) {
         return async (e) => {
             e.stopPropagation();
-            expression.criteria = expression.criteria === 'and' ? 'or' : 'and';
-            this.filterController.filterWithEvent(expression, 'modify');
+            const criteria = expression.criteria === 'and' ? 'or' : 'and';
+            this.filterController.filterWithEvent({ ...expression, criteria }, 'modify', expression);
             this.requestUpdate();
         };
     }
@@ -139,14 +160,13 @@ export default class IgcFilterRow extends LitElement {
         return async (e) => {
             e.stopPropagation();
             this.expression = expression;
-            await this.updateComplete;
-            this.input?.select();
+            await this.#selectInput();
         };
     }
     #chipRemoveFor(expression) {
         return async (e) => {
             e.stopPropagation();
-            this.#removeExpression(expression);
+            this.filterController.removeExpression(expression);
             if (this.active && this.expression === expression) {
                 this.#setDefaultExpression();
                 await this.updateComplete;
@@ -171,10 +191,15 @@ export default class IgcFilterRow extends LitElement {
         const { name, unary } = props.expression.condition;
         const { searchTerm: term } = props.expression;
         const prefix = html `<span slot="select"></span>${prefixedIcon(name)}`;
+        const expression = `${this.#nameFor(props.expression.key)} ${name} ${unary ? '' : term}`.trim();
         return html `
       <igc-chip
         selectable
         removable
+        .resourceStrings=${{
+            chip_remove: `Remove filter ${expression}`,
+            chip_select: `Edit filter ${expression}`,
+        }}
         ?selected=${props.selected}
         @igcRemove=${props.onRemove}
         @igcSelect=${props.onSelect}
@@ -183,19 +208,20 @@ export default class IgcFilterRow extends LitElement {
       </igc-chip>
     `;
     }
+    #renderChips(state, onSelectFor) {
+        return Array.from(state).map((expression, idx) => {
+            const props = {
+                expression,
+                selected: this.active && this.expression === expression,
+                onRemove: this.#chipRemoveFor(expression),
+                onSelect: onSelectFor(expression),
+            };
+            return html `${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(props)}`;
+        });
+    }
     renderActiveChips() {
         const state = this.filterController.get(this.column.field);
-        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)}`;
-            });
+        return state ? this.#renderChips(state, (expr) => this.#chipSelectFor(expr)) : nothing;
     }
     renderFilterActions() {
         return html `
@@ -234,12 +260,18 @@ export default class IgcFilterRow extends LitElement {
     </igc-dropdown>`;
     }
     renderDropdownTarget() {
+        const condition = this.condition.label ?? this.condition.name;
         return html `<igc-icon
       id="condition"
       slot="prefix"
       collection="internal"
+      role="button"
+      tabindex="0"
+      aria-haspopup="listbox"
+      aria-label=${`Filter condition: ${condition}`}
       .name=${this.condition.name}
       @click=${this.#openDropdownList}
+      @keydown=${this.#handleConditionKeydown}
     >
     </igc-icon>`;
     }
@@ -248,7 +280,7 @@ export default class IgcFilterRow extends LitElement {
       <igc-input
         outlined
         value=${ifDefined(this.expression.searchTerm)}
-        placeholder="Add filter value"
+        placeholder=${`Filter ${this.#nameFor(this.column.field)}`}
         ?readonly=${this.condition.unary}
         @igcInput=${this.#handleInput}
         @keydown=${this.#handleKeydown}
@@ -260,7 +292,10 @@ export default class IgcFilterRow extends LitElement {
     }
     renderActiveState() {
         return html `
-      <div part="active-state">
+      <div
+        part="active-state"
+        role="gridcell"
+      >
         <div part="filter-row-input">${this.renderInputArea()}</div>
         <div part="filter-row-filters">${this.renderActiveChips()}</div>
         <div part="filter-row-actions">${this.renderFilterActions()}</div>
@@ -268,49 +303,44 @@ export default class IgcFilterRow extends LitElement {
     `;
     }
     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)}`;
+        return this.#renderChips(state, (expression) => async (e) => {
+            e.stopPropagation();
+            this.column = column;
+            this.expression = expression;
+            this.#show();
         });
     }
     renderFilterState(column) {
         const state = this.filterController.get(column.field);
-        const partial = state && state.length < 3;
-        const hidden = state && state.length >= 3;
+        if (state && state.length < MAX_PREVIEW_CHIPS) {
+            return this.renderInactiveChips(column, state);
+        }
         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
+        const count = state ? html `<span slot="suffix">${state.length}</span>` : nothing;
+        return html `<igc-chip
       data-column=${column.field}
+      aria-label=${`Filter ${this.#nameFor(column.field)}`}
       @click=${open}
       >${prefixedIcon('filter')}Filter${count}</igc-chip
     >`;
-        return partial ? this.renderInactiveChips(column, state) : chip;
     }
     renderInactiveState() {
-        return this.state.columns.map((column) => column.hidden
-            ? nothing
-            : html `
-            <div part="filter-row-preview">
-              ${column.filterable ? this.renderFilterState(column) : nothing}
-            </div>
-          `);
+        return visibleColumns(this.state.columns).map((column, index) => html `
+        <div
+          part="filter-row-preview"
+          role="gridcell"
+          aria-colindex=${index + 1}
+        >
+          ${column.filterable ? this.renderFilterState(column) : nothing}
+        </div>
+      `);
     }
     render() {
-        return html `${this.active ? this.renderActiveState() : this.renderInactiveState()}`;
+        return this.active ? this.renderActiveState() : this.renderInactiveState();
     }
 }
 __decorate([