igniteui-grid-lite 1.0.0-alpha.9

package/components/header.js

@@ -0,0 +1,137 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { IgcIconComponent } from 'igniteui-webcomponents';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { gridStateContext } from '../controllers/state.js';
+import { MIN_COL_RESIZE_WIDTH, SORT_ICON_ASCENDING, SORT_ICON_DESCENDING, } from '../internal/constants.js';
+import { partNameMap } from '../internal/part-map.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_HEADER_TAG } from '../internal/tags.js';
+import { styles } from '../styles/header-cell/header-cell.css.js';
+export default class IgcGridLiteHeader extends LitElement {
+    static get tagName() {
+        return GRID_HEADER_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(IgcGridLiteHeader, IgcIconComponent);
+    }
+    get context() {
+        return {
+            parent: this,
+            column: this.column,
+        };
+    }
+    get isSortable() {
+        return Boolean(this.column.sort);
+    }
+    get resizeController() {
+        return this.state.resizing;
+    }
+    #addResizeEventHandlers() {
+        const config = { once: true };
+        this.addEventListener('gotpointercapture', () => {
+            this.resizeController.indicatorActive = true;
+        }, config);
+        this.addEventListener('lostpointercapture', this.#handlePointerLost, config);
+        this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);
+        this.addEventListener('pointermove', this.#handleResize);
+    }
+    #handleClick(e) {
+        e.stopPropagation();
+        this.state.sorting.sortFromHeaderClick(this.column);
+    }
+    #handleResize = ({ clientX }) => {
+        const { left } = this.getBoundingClientRect();
+        const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);
+        const x = this.offsetLeft + width;
+        this.resizeController.resize(this.column, width, x);
+    };
+    #handleResizeStart(ev) {
+        const { target, pointerId } = ev;
+        ev.preventDefault();
+        this.#addResizeEventHandlers();
+        this.resizeController.start(this);
+        target.setPointerCapture(pointerId);
+    }
+    #handlePointerLost = () => {
+        this.resizeController.indicatorActive = false;
+        this.removeEventListener('pointermove', this.#handleResize);
+        this.resizeController.stop();
+    };
+    #handleAutosize = () => this.resizeController.autosize(this.column, this);
+    renderSortPart() {
+        const state = this.state.sorting.state.get(this.column.key);
+        const idx = Array.from(this.state.sorting.state.values()).indexOf(state);
+        const attr = this.state.host.sortConfiguration.multiple
+            ? idx > -1
+                ? idx + 1
+                : nothing
+            : nothing;
+        const icon = state
+            ? state.direction === 'ascending'
+                ? SORT_ICON_ASCENDING
+                : SORT_ICON_DESCENDING
+            : SORT_ICON_ASCENDING;
+        return state || this.isSortable
+            ? html `<span
+          part=${partNameMap({ action: true, sorted: !!state?.direction })}
+          @click=${this.isSortable ? this.#handleClick : nothing}
+        >
+          <igc-icon
+            part=${partNameMap({ 'sorting-action': !!state })}
+            data-sortIndex=${attr}
+            name=${icon}
+            collection="internal"
+          ></igc-icon>
+        </span>`
+            : nothing;
+    }
+    renderContentPart() {
+        const defaultContent = this.column.headerText ?? this.column.key;
+        const template = this.column.headerTemplate;
+        return html `
+      <span part="title">
+        <span>${template ? template(this.context) : html `${defaultContent}`}</span>
+      </span>
+    `;
+    }
+    renderResizePart() {
+        return this.column.resizable
+            ? html `<span
+          part="resizable"
+          @dblclick=${this.#handleAutosize}
+          @pointerdown=${this.#handleResizeStart}
+        ></span>`
+            : nothing;
+    }
+    render() {
+        return html `
+      <div
+        part=${partNameMap({
+            content: true,
+            sortable: this.isSortable,
+            resizing: this.resizeController.indicatorActive,
+        })}
+      >
+        ${this.renderContentPart()}
+        <div part="actions">${this.renderSortPart()}</div>
+      </div>
+      ${this.renderResizePart()}
+    `;
+    }
+}
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], IgcGridLiteHeader.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteHeader.prototype, "column", void 0);
+//# sourceMappingURL=header.js.map

package/components/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { IgcIconComponent } from 'igniteui-webcomponents';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport {\n  MIN_COL_RESIZE_WIDTH,\n  SORT_ICON_ASCENDING,\n  SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\n\nexport default class IgcGridLiteHeader<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteHeader, IgcIconComponent);\n  }\n\n  protected get context(): IgcHeaderContext<T> {\n    return {\n      parent: this,\n      column: this.column,\n    };\n  }\n\n  protected get isSortable() {\n    return Boolean(this.column.sort);\n  }\n\n  protected get resizeController() {\n    return this.state.resizing;\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  #addResizeEventHandlers() {\n    const config: AddEventListenerOptions = { once: true };\n\n    this.addEventListener(\n      'gotpointercapture',\n      () => {\n        this.resizeController.indicatorActive = true;\n      },\n      config\n    );\n    this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n    this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n    this.addEventListener('pointermove', this.#handleResize);\n  }\n\n  #handleClick(e: Event) {\n    e.stopPropagation();\n    this.state.sorting.sortFromHeaderClick(this.column);\n  }\n\n  #handleResize = ({ clientX }: PointerEvent) => {\n    const { left } = this.getBoundingClientRect();\n    const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n    const x = this.offsetLeft + width;\n\n    this.resizeController.resize(this.column, width, x);\n  };\n\n  #handleResizeStart(ev: PointerEvent) {\n    const { target, pointerId } = ev;\n\n    ev.preventDefault();\n\n    this.#addResizeEventHandlers();\n    this.resizeController.start(this);\n\n    (target as HTMLElement).setPointerCapture(pointerId);\n  }\n\n  #handlePointerLost = () => {\n    this.resizeController.indicatorActive = false;\n    this.removeEventListener('pointermove', this.#handleResize);\n    this.resizeController.stop();\n  };\n\n  #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n  protected renderSortPart() {\n    const state = this.state.sorting.state.get(this.column.key);\n    const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n    const attr = this.state.host.sortConfiguration.multiple\n      ? idx > -1\n        ? idx + 1\n        : nothing\n      : nothing;\n    const icon = state\n      ? state.direction === 'ascending'\n        ? SORT_ICON_ASCENDING\n        : SORT_ICON_DESCENDING\n      : SORT_ICON_ASCENDING;\n\n    return state || this.isSortable\n      ? html`<span\n          part=${partNameMap({ action: true, sorted: !!state?.direction })}\n          @click=${this.isSortable ? this.#handleClick : nothing}\n        >\n          <igc-icon\n            part=${partNameMap({ 'sorting-action': !!state })}\n            data-sortIndex=${attr}\n            name=${icon}\n            collection=\"internal\"\n          ></igc-icon>\n        </span>`\n      : nothing;\n  }\n\n  protected renderContentPart() {\n    const defaultContent = this.column.headerText ?? this.column.key;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partNameMap({\n          content: true,\n          sortable: this.isSortable,\n          resizing: this.resizeController.indicatorActive,\n        })}\n      >\n        ${this.renderContentPart()}\n        <div part=\"actions\">${this.renderSortPart()}</div>\n      </div>\n      ${this.renderResizePart()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;\n  }\n}\n"]}

package/components/row.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
+import IgcGridLiteCell from './cell.js';
+/**
+ * Component representing the DOM row in the IgcGridLite.
+ */
+export default class IgcGridLiteRow<T extends object> extends LitElement {
+    static get tagName(): "igc-grid-lite-row";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    protected _cells: NodeListOf<IgcGridLiteCell<T>>;
+    data: T;
+    columns: Array<ColumnConfiguration<T>>;
+    get cells(): IgcGridLiteCell<T>[];
+    activeNode: ActiveNode<T>;
+    index: number;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;
+    }
+}

package/components/row.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from 'lit';
+import { property, queryAll } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_ROW_TAG } from '../internal/tags.js';
+import { styles } from '../styles/body-row/body-row.css.js';
+import IgcGridLiteCell from './cell.js';
+export default class IgcGridLiteRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.index = -1;
+    }
+    static get tagName() {
+        return GRID_ROW_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(IgcGridLiteRow, IgcGridLiteCell);
+    }
+    get cells() {
+        return Array.from(this._cells);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('exportparts', 'cell');
+    }
+    render() {
+        const { column: key, row: index } = this.activeNode;
+        return html `
+      ${map(this.columns, (column) => column.hidden
+            ? nothing
+            : html `<igc-grid-lite-cell
+              part="cell"
+              .active=${key === column.key && index === this.index}
+              .column=${column}
+              .row=${this}
+              .value=${this.data[column.key]}
+            ></igc-grid-lite-cell>`)}
+    `;
+    }
+}
+__decorate([
+    queryAll(IgcGridLiteCell.tagName)
+], IgcGridLiteRow.prototype, "_cells", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteRow.prototype, "data", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteRow.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteRow.prototype, "activeNode", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], IgcGridLiteRow.prototype, "index", void 0);
+//# sourceMappingURL=row.js.map

package/components/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/components/row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,eAAe,MAAM,WAAW,CAAC;AAKxC,MAAM,CAAC,OAAO,OAAO,cAAiC,SAAQ,UAAU;IAAxE;;QAiBS,YAAO,GAAkC,EAAE,CAAC;QAU5C,UAAK,GAAG,CAAC,CAAC,CAAC;IAwBpB,CAAC;IAlDQ,MAAM,KAAK,OAAO;QACvB,OAAO,YAAY,CAAC;IACtB,CAAC;aACsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACrD,CAAC;IAWD,IAAW,KAAK;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAQe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAEpD,OAAO,IAAI,CAAA;QACP,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAC7B,MAAM,CAAC,MAAM;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;wBAEQ,GAAG,KAAK,MAAM,CAAC,GAAG,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;wBAC1C,MAAM;qBACT,IAAyB;uBACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;mCACT,CAC5B;KACF,CAAC;IACJ,CAAC;;AAvCS;IADT,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC;8CACgB;AAG3C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACf;AAGT;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACoB;AAO5C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAC3B","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration } from '../internal/types.js';\nimport { styles } from '../styles/body-row/body-row.css.js';\nimport IgcGridLiteCell from './cell.js';\n\n/**\n * Component representing the DOM row in the IgcGridLite.\n */\nexport default class IgcGridLiteRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteRow, IgcGridLiteCell);\n  }\n\n  @queryAll(IgcGridLiteCell.tagName)\n  protected _cells!: NodeListOf<IgcGridLiteCell<T>>;\n\n  @property({ attribute: false })\n  public data!: T;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  public get cells() {\n    return Array.from(this._cells);\n  }\n\n  @property({ attribute: false })\n  public activeNode!: ActiveNode<T>;\n\n  @property({ attribute: false, type: Number })\n  public index = -1;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('exportparts', 'cell');\n  }\n\n  protected override render() {\n    const { column: key, row: index } = this.activeNode;\n\n    return html`\n      ${map(this.columns, (column) =>\n        column.hidden\n          ? nothing\n          : html`<igc-grid-lite-cell\n              part=\"cell\"\n              .active=${key === column.key && index === this.index}\n              .column=${column}\n              .row=${this as IgcGridLiteRow<T>}\n              .value=${this.data[column.key]}\n            ></igc-grid-lite-cell>`\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;\n  }\n}\n"]}

package/components/virtualizer.d.ts

@@ -0,0 +1,12 @@
+import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
+export default class IgcVirtualizer extends LitVirtualizer {
+    static get tagName(): "igc-virtualizer";
+    static register(): void;
+    scroller: boolean;
+    connectedCallback(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [IgcVirtualizer.tagName]: IgcVirtualizer;
+    }
+}

package/components/virtualizer.js

@@ -0,0 +1,21 @@
+import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_BODY } from '../internal/tags.js';
+export default class IgcVirtualizer extends LitVirtualizer {
+    constructor() {
+        super(...arguments);
+        this.scroller = true;
+    }
+    static get tagName() {
+        return GRID_BODY;
+    }
+    static register() {
+        registerComponent(IgcVirtualizer);
+    }
+    async connectedCallback() {
+        await super.layoutComplete;
+        super.connectedCallback();
+        this.setAttribute('tabindex', '0');
+    }
+}
+//# sourceMappingURL=virtualizer.js.map

package/components/virtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../src/components/virtualizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,cAAc;IAA1D;;QASkB,aAAQ,GAAG,IAAI,CAAC;IAQlC,CAAC;IAhBQ,MAAM,KAAK,OAAO;QACvB,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;IAIe,KAAK,CAAC,iBAAiB;QACrC,MAAM,KAAK,CAAC,cAAc,CAAC;QAE3B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;CACF","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_BODY } from '../internal/tags.js';\n\nexport default class IgcVirtualizer extends LitVirtualizer {\n  public static get tagName() {\n    return GRID_BODY;\n  }\n\n  public static register(): void {\n    registerComponent(IgcVirtualizer);\n  }\n\n  public override scroller = true;\n\n  public override async connectedCallback() {\n    await super.layoutComplete;\n\n    super.connectedCallback();\n    this.setAttribute('tabindex', '0');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcVirtualizer.tagName]: IgcVirtualizer;\n  }\n}\n"]}

package/controllers/data-operation.d.ts

@@ -0,0 +1,17 @@
+import type { ReactiveController } from 'lit';
+import type { GridHost } from '../internal/types.js';
+import FilterDataOperation from '../operations/filter.js';
+import SortDataOperation from '../operations/sort.js';
+import type { StateController } from './state.js';
+export declare class DataOperationsController<T extends object> implements ReactiveController {
+    protected host: GridHost<T>;
+    protected sorting: SortDataOperation<T>;
+    protected filtering: FilterDataOperation<T>;
+    constructor(host: GridHost<T>);
+    hostConnected(): void;
+    protected get hasCustomSort(): boolean;
+    protected get hasCustomFilter(): boolean;
+    protected get customFilter(): import("../index.js").DataPipelineHook<T>;
+    protected get customSort(): import("../index.js").DataPipelineHook<T>;
+    apply(data: T[], state: StateController<T>): Promise<T[]>;
+}

package/controllers/data-operation.js

@@ -0,0 +1,36 @@
+import { isDefined } from '../internal/is-defined.js';
+import FilterDataOperation from '../operations/filter.js';
+import SortDataOperation from '../operations/sort.js';
+export class DataOperationsController {
+    constructor(host) {
+        this.host = host;
+        this.sorting = new SortDataOperation();
+        this.filtering = new FilterDataOperation();
+        this.host.addController(this);
+    }
+    hostConnected() { }
+    get hasCustomSort() {
+        return isDefined(this.host.dataPipelineConfiguration?.sort);
+    }
+    get hasCustomFilter() {
+        return isDefined(this.host.dataPipelineConfiguration?.filter);
+    }
+    get customFilter() {
+        return this.host.dataPipelineConfiguration.filter;
+    }
+    get customSort() {
+        return this.host.dataPipelineConfiguration.sort;
+    }
+    async apply(data, state) {
+        const { filtering, sorting } = state;
+        let transformed;
+        transformed = this.hasCustomFilter
+            ? await this.customFilter({ data, grid: this.host, type: 'filter' })
+            : this.filtering.apply(data, filtering.state);
+        transformed = this.hasCustomSort
+            ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })
+            : this.sorting.apply(transformed, sorting.state);
+        return transformed;
+    }
+}
+//# sourceMappingURL=data-operation.js.map

package/controllers/data-operation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-operation.js","sourceRoot":"","sources":["../../src/controllers/data-operation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAGtD,MAAM,OAAO,wBAAwB;IAInC,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAH7B,YAAO,GAAG,IAAI,iBAAiB,EAAK,CAAC;QACrC,cAAS,GAAG,IAAI,mBAAmB,EAAK,CAAC;QAGjD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAEzB,IAAc,aAAa;QACzB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAc,eAAe;QAC3B,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC;IAED,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,MAAO,CAAC;IACtD,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,IAAK,CAAC;IACpD,CAAC;IAEM,KAAK,CAAC,KAAK,CAAC,IAAS,EAAE,KAAyB;QACrD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QACrC,IAAI,WAAgB,CAAC;QAErB,WAAW,GAAG,IAAI,CAAC,eAAe;YAChC,CAAC,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YACpE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhD,WAAW,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC7E,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,WAAW,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { isDefined } from '../internal/is-defined.js';\nimport type { GridHost } from '../internal/types.js';\nimport FilterDataOperation from '../operations/filter.js';\nimport SortDataOperation from '../operations/sort.js';\nimport type { StateController } from './state.js';\n\nexport class DataOperationsController<T extends object> implements ReactiveController {\n  protected sorting = new SortDataOperation<T>();\n  protected filtering = new FilterDataOperation<T>();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  protected get hasCustomSort() {\n    return isDefined(this.host.dataPipelineConfiguration?.sort);\n  }\n\n  protected get hasCustomFilter() {\n    return isDefined(this.host.dataPipelineConfiguration?.filter);\n  }\n\n  protected get customFilter() {\n    return this.host.dataPipelineConfiguration!.filter!;\n  }\n\n  protected get customSort() {\n    return this.host.dataPipelineConfiguration!.sort!;\n  }\n\n  public async apply(data: T[], state: StateController<T>) {\n    const { filtering, sorting } = state;\n    let transformed: T[];\n\n    transformed = this.hasCustomFilter\n      ? await this.customFilter({ data, grid: this.host, type: 'filter' })\n      : this.filtering.apply(data, filtering.state);\n\n    transformed = this.hasCustomSort\n      ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })\n      : this.sorting.apply(transformed, sorting.state);\n\n    return transformed;\n  }\n}\n"]}

package/controllers/dom.d.ts

@@ -0,0 +1,19 @@
+import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';
+import { type ReactiveController } from 'lit';
+import { type StyleInfo } from 'lit/directives/style-map.js';
+import type { GridHost } from '../internal/types.js';
+import type { StateController } from './state.js';
+export declare class GridDOMController<T extends object> implements ReactiveController {
+    #private;
+    protected host: GridHost<T>;
+    protected state: StateController<T>;
+    constructor(host: GridHost<T>, state: StateController<T>);
+    get container(): import("../components/virtualizer.js").default;
+    columnSizes: StyleInfo;
+    rowRenderer: RenderItemFunction<T>;
+    hostConnected(): Promise<void>;
+    hostUpdate(): void;
+    setScrollOffset(): void;
+    protected setGridColumnSizes(): void;
+    getActiveRowStyles(index: number): StyleInfo;
+}

package/controllers/dom.js

@@ -0,0 +1,54 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { registerGridIcons } from '../internal/icon-registry.js';
+import { applyColumnWidths } from '../internal/utils.js';
+export class GridDOMController {
+    constructor(host, state) {
+        this.host = host;
+        this.state = state;
+        this.#initialSize = () => {
+            setTimeout(() => this.setScrollOffset());
+        };
+        this.columnSizes = {};
+        this.rowRenderer = (data, index) => {
+            return html `
+      <igc-grid-lite-row
+        part="row"
+        style=${styleMap({ ...this.columnSizes, ...this.getActiveRowStyles(index) })}
+        .index=${index}
+        .activeNode=${this.state.active}
+        .data=${data}
+        .columns=${this.host.columns}
+      >
+      </igc-grid-lite-row>
+    `;
+        };
+        this.host.addController(this);
+    }
+    #initialSize;
+    get container() {
+        return this.host.scrollContainer;
+    }
+    async hostConnected() {
+        registerGridIcons();
+        this.setGridColumnSizes();
+        await this.host.updateComplete;
+        this.container.addEventListener('visibilityChanged', this.#initialSize, { once: true });
+    }
+    hostUpdate() {
+        this.setScrollOffset();
+        this.setGridColumnSizes();
+    }
+    setScrollOffset() {
+        const size = this.container ? this.container.offsetWidth - this.container.clientWidth : 0;
+        this.host.style.setProperty('--scrollbar-offset', `${size}px`);
+    }
+    setGridColumnSizes() {
+        this.columnSizes = applyColumnWidths(this.host.columns);
+    }
+    getActiveRowStyles(index) {
+        const { row } = this.state.active;
+        return row === index ? { 'z-index': '3' } : {};
+    }
+}
+//# sourceMappingURL=dom.js.map

package/controllers/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/controllers/dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA2B,MAAM,KAAK,CAAC;AACpD,OAAO,EAAkB,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,OAAO,iBAAiB;IAC5B,YACY,IAAiB,EACjB,KAAyB;QADzB,SAAI,GAAJ,IAAI,CAAa;QACjB,UAAK,GAAL,KAAK,CAAoB;QAKrC,iBAAY,GAAG,GAAG,EAAE;YAClB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC;QAOK,gBAAW,GAAc,EAAE,CAAC;QAE5B,gBAAW,GAA0B,CAAC,IAAO,EAAE,KAAa,EAAE,EAAE;YACrE,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;iBACnE,KAAK;sBACA,IAAI,CAAC,KAAK,CAAC,MAAM;gBACvB,IAAI;mBACD,IAAI,CAAC,IAAI,CAAC,OAAO;;;KAG/B,CAAC;QACJ,CAAC,CAAC;QA1BA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,YAAY,CAEV;IAEF,IAAW,SAAS;QAElB,OAAO,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACnC,CAAC;IAkBM,KAAK,CAAC,aAAa;QACxB,iBAAiB,EAAE,CAAC;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAG1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,eAAe;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1F,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;IACjE,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC;IAEM,kBAAkB,CAAC,KAAa;QACrC,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAClC,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport { html, type ReactiveController } from 'lit';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { registerGridIcons } from '../internal/icon-registry.js';\nimport type { GridHost } from '../internal/types.js';\nimport { applyColumnWidths } from '../internal/utils.js';\nimport type { StateController } from './state.js';\n\nexport class GridDOMController<T extends object> implements ReactiveController {\n  constructor(\n    protected host: GridHost<T>,\n    protected state: StateController<T>\n  ) {\n    this.host.addController(this);\n  }\n\n  #initialSize = () => {\n    setTimeout(() => this.setScrollOffset());\n  };\n\n  public get container() {\n    // @ts-expect-error: protected member access\n    return this.host.scrollContainer;\n  }\n\n  public columnSizes: StyleInfo = {};\n\n  public rowRenderer: RenderItemFunction<T> = (data: T, index: number) => {\n    return html`\n      <igc-grid-lite-row\n        part=\"row\"\n        style=${styleMap({ ...this.columnSizes, ...this.getActiveRowStyles(index) })}\n        .index=${index}\n        .activeNode=${this.state.active}\n        .data=${data}\n        .columns=${this.host.columns}\n      >\n      </igc-grid-lite-row>\n    `;\n  };\n\n  public async hostConnected() {\n    registerGridIcons();\n    this.setGridColumnSizes();\n    // Wait for the initial paint of the virtualizer and recalculate the scrollbar offset\n    // for the next one\n    await this.host.updateComplete;\n    this.container.addEventListener('visibilityChanged', this.#initialSize, { once: true });\n  }\n\n  public hostUpdate(): void {\n    this.setScrollOffset();\n    this.setGridColumnSizes();\n  }\n\n  public setScrollOffset() {\n    const size = this.container ? this.container.offsetWidth - this.container.clientWidth : 0;\n    this.host.style.setProperty('--scrollbar-offset', `${size}px`);\n  }\n\n  protected setGridColumnSizes() {\n    this.columnSizes = applyColumnWidths(this.host.columns);\n  }\n\n  public getActiveRowStyles(index: number): StyleInfo {\n    const { row } = this.state.active;\n    return row === index ? { 'z-index': '3' } : {};\n  }\n}\n"]}

package/controllers/filter.d.ts

@@ -0,0 +1,21 @@
+import type { ReactiveController } from 'lit';
+import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
+import { FilterState } from '../operations/filter/state.js';
+import type { FilterExpression } from '../operations/filter/types.js';
+export declare class FilterController<T extends object> implements ReactiveController {
+    #private;
+    protected host: GridHost<T>;
+    constructor(host: GridHost<T>);
+    state: FilterState<T>;
+    get filterRow(): import("../components/filter-row.js").default<T>;
+    hostConnected(): void;
+    hostUpdate(): void;
+    get(key: Keys<T>): import("../operations/filter/tree.js").FilterExpressionTree<T> | undefined;
+    reset(key?: Keys<T>): void;
+    setActiveColumn(column?: ColumnConfiguration<T>): void;
+    getDefaultExpression(column: ColumnConfiguration<T>): FilterExpression<T>;
+    removeAllExpressions(key: Keys<T>): Promise<void>;
+    removeExpression(expression: FilterExpression<T>): Promise<void>;
+    filterWithEvent(expression: FilterExpression<T>, type: 'add' | 'modify' | 'remove'): Promise<void>;
+    filter(expression: FilterExpression<T> | FilterExpression<T>[]): void;
+}

package/controllers/filter.js

@@ -0,0 +1,105 @@
+import { PIPELINE } from '../internal/constants.js';
+import { asArray, getFilterOperandsFor } from '../internal/utils.js';
+import { FilterState } from '../operations/filter/state.js';
+export class FilterController {
+    constructor(host) {
+        this.host = host;
+        this.state = new FilterState();
+        this.host.addController(this);
+    }
+    get filterRow() {
+        return this.host.filterRow;
+    }
+    get #virtualizer() {
+        return this.host.scrollContainer;
+    }
+    #emitFilteringEvent(expression, type) {
+        return this.host.emitEvent('filtering', {
+            detail: {
+                key: expression.key,
+                expressions: [expression],
+                type,
+            },
+            cancelable: true,
+        });
+    }
+    #emitFilteredEvent(detail) {
+        return this.host.emitEvent('filtered', { detail });
+    }
+    #filter(expression) {
+        for (const expr of asArray(expression)) {
+            this.state.set(expr);
+        }
+        this.#virtualizer?.scrollTo({ top: 0 });
+        this.host.requestUpdate(PIPELINE);
+    }
+    hostConnected() { }
+    hostUpdate() {
+        this.filterRow?.requestUpdate();
+    }
+    get(key) {
+        return this.state.get(key);
+    }
+    reset(key) {
+        key ? this.state.delete(key) : this.state.clear();
+    }
+    setActiveColumn(column) {
+        if (column?.filter && this.filterRow?.active) {
+            this.filterRow.column = column;
+            this.filterRow.expression = this.getDefaultExpression(column);
+            this.host.requestUpdate();
+        }
+    }
+    getDefaultExpression(column) {
+        const caseSensitive = typeof column.filter === 'boolean' ? false : Boolean(column.filter?.caseSensitive);
+        const operands = getFilterOperandsFor(column);
+        const keys = Object.keys(operands);
+        return {
+            key: column.key,
+            condition: operands[keys[0]],
+            caseSensitive,
+        };
+    }
+    async removeAllExpressions(key) {
+        const state = this.get(key)?.all ?? [];
+        if (!this.host.emitEvent('filtering', {
+            detail: {
+                key,
+                expressions: state,
+                type: 'remove',
+            },
+            cancelable: true,
+        })) {
+            return;
+        }
+        this.reset(key);
+        this.#filter([]);
+        await this.host.updateComplete;
+        this.#emitFilteredEvent({ key, state: this.get(key)?.all ?? [] });
+    }
+    async removeExpression(expression) {
+        const state = this.get(expression.key);
+        if (!this.#emitFilteringEvent(expression, 'remove')) {
+            return;
+        }
+        state?.remove(expression);
+        if (state?.empty) {
+            this.reset(state.key);
+        }
+        this.#filter([]);
+        await this.host.updateComplete;
+        this.#emitFilteredEvent({ key: expression.key, state: state?.all ?? [] });
+    }
+    async filterWithEvent(expression, type) {
+        if (!this.#emitFilteringEvent(expression, type)) {
+            return;
+        }
+        this.#filter(expression);
+        await this.host.updateComplete;
+        this.#emitFilteredEvent({ key: expression.key, state: this.get(expression.key)?.all ?? [] });
+    }
+    filter(expression) {
+        this.#filter(asArray(expression).map((expr) => Object.assign(this.getDefaultExpression(this.host.getColumn(expr.key)), expr)));
+    }
+}
+//# sourceMappingURL=filter.js.map

package/controllers/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","sourceRoot":"","sources":["../../src/controllers/filter.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type { IgcFilteredEvent } from '../components/grid.js';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\nimport { asArray, getFilterOperandsFor } from '../internal/utils.js';\nimport { FilterState } from '../operations/filter/state.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\n\nexport class FilterController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public state: FilterState<T> = new FilterState();\n\n  public get filterRow() {\n    // @ts-expect-error - protected access\n    return this.host.filterRow;\n  }\n\n  get #virtualizer() {\n    // @ts-expect-error - protected access\n    return this.host.scrollContainer;\n  }\n\n  #emitFilteringEvent(expression: FilterExpression<T>, type: 'add' | 'modify' | 'remove') {\n    return this.host.emitEvent('filtering', {\n      detail: {\n        key: expression.key,\n        expressions: [expression],\n        type,\n      },\n      cancelable: true,\n    });\n  }\n\n  #emitFilteredEvent(detail?: IgcFilteredEvent<T>) {\n    return this.host.emitEvent('filtered', { detail });\n  }\n\n  #filter(expression: FilterExpression<T> | FilterExpression<T>[]) {\n    for (const expr of asArray(expression)) {\n      this.state.set(expr);\n    }\n\n    // HACK: In the case where the scrollTop is a large and amount and a big chunk of data is filtered out\n    // HACK: the virtualizer can't recalculate its scroll position correctly. Thus, we reset the scrollTop state.\n    this.#virtualizer?.scrollTo({ top: 0 });\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public hostConnected() {}\n\n  public hostUpdate(): void {\n    this.filterRow?.requestUpdate();\n  }\n\n  public get(key: Keys<T>) {\n    return this.state.get(key);\n  }\n\n  public reset(key?: Keys<T>) {\n    key ? this.state.delete(key) : this.state.clear();\n  }\n\n  public setActiveColumn(column?: ColumnConfiguration<T>) {\n    if (column?.filter && this.filterRow?.active) {\n      this.filterRow.column = column;\n      this.filterRow.expression = this.getDefaultExpression(column);\n      this.host.requestUpdate();\n    }\n  }\n\n  public getDefaultExpression(column: ColumnConfiguration<T>) {\n    const caseSensitive =\n      typeof column.filter === 'boolean' ? false : Boolean(column.filter?.caseSensitive);\n    const operands = getFilterOperandsFor(column);\n    const keys = Object.keys(operands) as Keys<typeof operands>[];\n\n    // XXX: Types\n    return {\n      key: column.key,\n      condition: operands[keys[0]],\n      caseSensitive,\n    } as unknown as FilterExpression<T>;\n  }\n\n  public async removeAllExpressions(key: Keys<T>) {\n    const state = this.get(key)?.all ?? [];\n\n    if (\n      !this.host.emitEvent('filtering', {\n        detail: {\n          key,\n          expressions: state,\n          type: 'remove',\n        },\n        cancelable: true,\n      })\n    ) {\n      return;\n    }\n\n    this.reset(key);\n    this.#filter([]);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key, state: this.get(key)?.all ?? [] });\n  }\n\n  public async removeExpression(expression: FilterExpression<T>) {\n    const state = this.get(expression.key);\n\n    if (!this.#emitFilteringEvent(expression, 'remove')) {\n      return;\n    }\n\n    state?.remove(expression);\n\n    if (state?.empty) {\n      this.reset(state.key);\n    }\n\n    this.#filter([]);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key: expression.key, state: state?.all ?? [] });\n  }\n\n  public async filterWithEvent(expression: FilterExpression<T>, type: 'add' | 'modify' | 'remove') {\n    if (!this.#emitFilteringEvent(expression, type)) {\n      return;\n    }\n\n    this.#filter(expression);\n\n    await this.host.updateComplete;\n    this.#emitFilteredEvent({ key: expression.key, state: this.get(expression.key)?.all ?? [] });\n  }\n\n  public filter(expression: FilterExpression<T> | FilterExpression<T>[]) {\n    this.#filter(\n      asArray(expression).map((expr) =>\n        Object.assign(this.getDefaultExpression(this.host.getColumn(expr.key)!), expr)\n      )\n    );\n  }\n}\n"]}

package/controllers/navigation.d.ts

@@ -0,0 +1,27 @@
+import type { ReactiveController } from 'lit';
+import type { ActiveNode, GridHost, Keys } from '../internal/types.js';
+export declare class NavigationController<T extends object> implements ReactiveController {
+    protected host: GridHost<T>;
+    protected handlers: Map<string, (() => void) | (() => void) | (() => void) | (() => void) | (() => void) | (() => void)>;
+    protected get virtualizer(): import("../components/virtualizer.js").default;
+    protected state: Map<import("../internal/types.js").NavigationState, ActiveNode<any>>;
+    protected _active: Readonly<ActiveNode<any>>;
+    protected get nextNode(): ActiveNode<T>;
+    protected get columns(): import("../index.js").ColumnConfiguration<T, keyof T>[];
+    protected get firstColumn(): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
+    protected getPreviousColumn(key: Keys<T>): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
+    protected getNextColumn(key: Keys<T>): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
+    protected scrollToCell(node: ActiveNode<T>): void;
+    get active(): ActiveNode<T>;
+    set active(node: ActiveNode<T>);
+    constructor(host: GridHost<T>);
+    protected home(): void;
+    protected end(): void;
+    protected arrowDown(): void;
+    protected arrowUp(): void;
+    protected arrowLeft(): void;
+    protected arrowRight(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    navigate(event: KeyboardEvent): void;
+}