apex-grid 1.0.0-rc.0

package/dist/src/components/grid.d.ts

@@ -0,0 +1,183 @@
+import { nothing, PropertyDeclaration, TemplateResult } from 'lit';
+import { ContextProvider } from '@lit-labs/context';
+import { StateController } from '../controllers/state.js';
+import { DataOperationsController } from '../controllers/data-operation.js';
+import { GridDOMController } from '../controllers/dom.js';
+import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
+import type { ColumnConfiguration, GridRemoteConfig, GridSortConfiguration, Keys } from '../internal/types.js';
+import type { FilterExpressionTree } from '../operations/filter/tree.js';
+import type { FilterExpression } from '../operations/filter/types.js';
+import type { SortExpression } from '../operations/sort/types.js';
+import ApexGridBody from './grid-body.js';
+import ApexGridHeaderRow from './header-row.js';
+import ApexGridRow from './row.js';
+import ApexFilterRow from './filter-row.js';
+/**
+ * Event object for the filtering event of the grid.
+ */
+export interface ApexFilteringEvent<T extends object> {
+    /**
+     * The filter expression to apply.
+     */
+    expression: FilterExpression<T>;
+    /**
+     * The filter state of the column.
+     */
+    state: FilterExpressionTree<T>;
+}
+/**
+ * Events for the apex-grid.
+ */
+export interface ApexGridEventMap<T extends object> {
+    /**
+     * Emitted when sorting is initiated through the UI.
+     * Returns the sort expression which will be used for the operation.
+     *
+     * @remarks
+     * The event is cancellable which prevents the operation from being applied.
+     * The expression can be modified prior to the operation running.
+     *
+     * @event
+     */
+    sorting: CustomEvent<SortExpression<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>>;
+    /**
+     * Emitted when filtering is initiated through the UI.
+     *
+     * @remarks
+     * The event is cancellable which prevents the operation from being applied.
+     * The expression can be modified prior to the operation running.
+     *
+     * @event
+     */
+    filtering: CustomEvent<ApexFilteringEvent<T>>;
+    /**
+     * Emitted when a filter operation initiated through the UI has completed.
+     * Returns the filter state for the affected column.
+     *
+     * @event
+     */
+    filtered: CustomEvent<FilterExpressionTree<T>>;
+}
+/**
+ * Apex grid is a web component for displaying data in a tabular format quick and easy.
+ *
+ * Out of the box it provides row virtualization, sort and filter operations (client and server side),
+ * the ability to template cells and headers and column hiding.
+ *
+ * @element apex-grid
+ *
+ * @fires sorting - Emitted when sorting is initiated through the UI.
+ * @fires sorted - Emitted when a sort operation initiated through the UI has completed.
+ * @fires filtering - Emitted when filtering is initiated through the UI.
+ * @fires filtered - Emitted when a filter operation initiated through the UI has completed.
+ *
+ */
+export default class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMap<T>> {
+    static get is(): "apex-grid";
+    static styles: import("lit").CSSResult;
+    protected stateController: StateController<T>;
+    protected DOM: GridDOMController<T>;
+    protected dataController: DataOperationsController<T>;
+    protected rowRenderer: <T_1>(data: T_1, index: number) => TemplateResult;
+    protected stateProvider: ContextProvider<{
+        __context__: StateController<any>;
+    }>;
+    protected bodyElement: ApexGridBody;
+    protected headerRow: ApexGridHeaderRow<T>;
+    protected filterRow: ApexFilterRow<T>;
+    protected dataState: Array<T>;
+    protected _rows: NodeListOf<ApexGridRow<T>>;
+    /** Column configuration for the grid. */
+    columns: Array<ColumnConfiguration<T>>;
+    /** The data source for the grid. */
+    data: Array<T>;
+    /**
+     * Whether the grid will try to "resolve" its column configuration based on the passed
+     * data source.
+     *
+     * @remarks
+     * This is a one-time operation which is executed when the grid is initially added to the DOM.
+     * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually
+     * result in empty column configuration for the grid.
+     *
+     * This property is ignored if any existing column configuration already exists in the grid.
+     */
+    autoGenerate: boolean;
+    /** Sort configuration property for the grid. */
+    sortConfiguration: GridSortConfiguration;
+    /**
+     * Configuration object which controls remote data operations for the grid.
+     */
+    remoteConfiguration?: GridRemoteConfig<T>;
+    /**
+     * Set sort state for the apex grid.
+     *
+     * @remarks
+     *
+     */
+    sortExpressions: SortExpression<T>[];
+    /**
+     * Set filter state for the apex grid.
+     */
+    filterExpressions: FilterExpression<T>[];
+    /**
+     * Returns the collection of rendered row elements in the grid.
+     *
+     * @remarks
+     * Since the grid has virtualization, this property returns only the currently rendered
+     * chunk of elements in the DOM.
+     */
+    get rows(): ApexGridRow<T>[];
+    /**
+     * Returns the state of the data source after sort/filter operations
+     * have been applied.
+     */
+    get dataView(): ReadonlyArray<T>;
+    /**
+     * The total number of items in the {@link ApexGrid.dataView} collection.
+     */
+    get totalItems(): number;
+    constructor();
+    connectedCallback(): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration<this, unknown>): void;
+    protected watchSortExpressions(): void;
+    protected watchFilterExpressions(): void;
+    protected watchColumns(_: ColumnConfiguration<T>[], newConfig?: ColumnConfiguration<T>[]): void;
+    protected dataChanged(): void;
+    protected pipeline(): Promise<void>;
+    /**
+     * Performs a filter operation in the grid based on the passed expression(s).
+     */
+    filter(config: FilterExpression<T> | FilterExpression<T>[]): void;
+    /**
+     * Performs a sort operation in the grid based on the passed expression(s).
+     */
+    sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
+    /**
+     * Returns a {@link ColumnConfiguration} for a given column.
+     */
+    getColumn(id: Keys<T> | number): ColumnConfiguration<T> | undefined;
+    /**
+     * Updates the column configuration of the grid.
+     */
+    updateColumn(key: Keys<T>, config: Partial<ColumnConfiguration<T>>): void;
+    protected bodyClickHandler(event: MouseEvent): void;
+    protected bodyKeydownHandler(event: KeyboardEvent): void;
+    protected renderHeaderRow(): TemplateResult<1>;
+    protected renderBody(): TemplateResult<1>;
+    protected renderFilterRow(): typeof nothing | TemplateResult<1>;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [ApexGrid.is]: ApexGrid<object>;
+    }
+}
+//# sourceMappingURL=grid.d.ts.map

package/dist/src/components/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid.ts"],"names":[],"mappings":"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"}

package/dist/src/components/grid.js

@@ -0,0 +1,303 @@
+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, nothing } from 'lit';
+import { ContextProvider } from '@lit-labs/context';
+import { customElement, eventOptions, property, query, queryAll, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { GRID_TAG } from '../internal/tags.js';
+import { StateController, gridStateContext } from '../controllers/state.js';
+import { DataOperationsController } from '../controllers/data-operation.js';
+import { GridDOMController } from '../controllers/dom.js';
+import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
+import { watch } from '../internal/watch.js';
+import { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';
+import { registerGridIcons } from '../internal/icon-registry.js';
+import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';
+import { default as bootstrap } from '../styles/grid/themes/light/grid.bootstrap-styles.js';
+import { default as fluent } from '../styles/grid/themes/light/grid.fluent-styles.js';
+import { default as indigo } from '../styles/grid/themes/light/grid.indigo-styles.js';
+import { default as material } from '../styles/grid/themes/light/grid.material-styles.js';
+import ApexGridBody from './grid-body.js';
+import ApexGridHeaderRow from './header-row.js';
+import ApexGridRow from './row.js';
+import ApexGridCell from './cell.js';
+import ApexFilterRow from './filter-row.js';
+import { themes } from 'igniteui-webcomponents/theming/theming-decorator.js';
+import { defineComponents, IgcButtonComponent, IgcChipComponent, IgcDropdownComponent, IgcInputComponent, IgcIconComponent, IgcDropdownItemComponent, } from 'igniteui-webcomponents';
+defineComponents(IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent, IgcIconComponent, IgcDropdownItemComponent);
+/**
+ * Apex grid is a web component for displaying data in a tabular format quick and easy.
+ *
+ * Out of the box it provides row virtualization, sort and filter operations (client and server side),
+ * the ability to template cells and headers and column hiding.
+ *
+ * @element apex-grid
+ *
+ * @fires sorting - Emitted when sorting is initiated through the UI.
+ * @fires sorted - Emitted when a sort operation initiated through the UI has completed.
+ * @fires filtering - Emitted when filtering is initiated through the UI.
+ * @fires filtered - Emitted when a filter operation initiated through the UI has completed.
+ *
+ */
+let ApexGrid = class ApexGrid extends EventEmitterBase {
+    static get is() {
+        return GRID_TAG;
+    }
+    /**
+     * Returns the collection of rendered row elements in the grid.
+     *
+     * @remarks
+     * Since the grid has virtualization, this property returns only the currently rendered
+     * chunk of elements in the DOM.
+     */
+    get rows() {
+        return Array.from(this._rows);
+    }
+    /**
+     * Returns the state of the data source after sort/filter operations
+     * have been applied.
+     */
+    get dataView() {
+        return this.dataState;
+    }
+    /**
+     * The total number of items in the {@link ApexGrid.dataView} collection.
+     */
+    get totalItems() {
+        return this.dataState.length;
+    }
+    constructor() {
+        super();
+        this.stateController = new StateController(this);
+        this.DOM = new GridDOMController(this, this.stateController);
+        this.dataController = new DataOperationsController(this);
+        this.rowRenderer = (data, index) => {
+            return html `<apex-grid-row
+      part="row"
+      style=${styleMap({ ...this.DOM.columnSizes, ...this.DOM.getActiveRowStyles(index) })}
+      .index=${index}
+      .activeNode=${this.stateController.active}
+      .data=${data}
+      .columns=${this.columns}
+    ></apex-grid-row>`;
+        };
+        this.stateProvider = new ContextProvider(this, gridStateContext, this.stateController);
+        this.dataState = [];
+        /** Column configuration for the grid. */
+        this.columns = [];
+        /** The data source for the grid. */
+        this.data = [];
+        /**
+         * Whether the grid will try to "resolve" its column configuration based on the passed
+         * data source.
+         *
+         * @remarks
+         * This is a one-time operation which is executed when the grid is initially added to the DOM.
+         * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually
+         * result in empty column configuration for the grid.
+         *
+         * This property is ignored if any existing column configuration already exists in the grid.
+         */
+        this.autoGenerate = false;
+        /** Sort configuration property for the grid. */
+        this.sortConfiguration = {
+            multiple: true,
+            triState: true,
+        };
+        /**
+         * Set sort state for the apex grid.
+         *
+         * @remarks
+         *
+         */
+        this.sortExpressions = [];
+        /**
+         * Set filter state for the apex grid.
+         */
+        this.filterExpressions = [];
+        registerGridIcons();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        autoGenerateColumns(this);
+    }
+    requestUpdate(name, oldValue, options) {
+        var _a, _b;
+        (_a = this.headerRow) === null || _a === void 0 ? void 0 : _a.requestUpdate();
+        (_b = this.filterRow) === null || _b === void 0 ? void 0 : _b.requestUpdate();
+        super.requestUpdate(name, oldValue, options);
+    }
+    watchSortExpressions() {
+        if (this.sortExpressions.length) {
+            this.sort(this.sortExpressions);
+        }
+    }
+    watchFilterExpressions() {
+        if (this.filterExpressions.length) {
+            this.filter(this.filterExpressions);
+        }
+    }
+    watchColumns(_, newConfig = []) {
+        this.columns = newConfig.map(config => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));
+    }
+    dataChanged() {
+        this.dataState = structuredClone(this.data);
+        if (this.hasUpdated) {
+            this.pipeline();
+        }
+    }
+    async pipeline() {
+        this.dataState = await this.dataController.apply(structuredClone(this.data), this.stateController);
+    }
+    /**
+     * Performs a filter operation in the grid based on the passed expression(s).
+     */
+    filter(config) {
+        this.stateController.filtering.filter(asArray(config).map(each => typeof each.condition === 'string'
+            ? Object.assign(each, {
+                condition: getFilterOperandsFor(this.getColumn(each.key)).get(each.condition),
+            })
+            : each));
+    }
+    /**
+     * Performs a sort operation in the grid based on the passed expression(s).
+     */
+    sort(expressions) {
+        this.stateController.sorting.sort(expressions);
+    }
+    /**
+     * Returns a {@link ColumnConfiguration} for a given column.
+     */
+    getColumn(id) {
+        return typeof id === 'number'
+            ? this.columns.at(id)
+            : this.columns.find(({ key }) => key === id);
+    }
+    /**
+     * Updates the column configuration of the grid.
+     */
+    updateColumn(key, config) {
+        // Check and reset data operation states
+        // TODO: Run `pipeline` updates ?
+        if (!config.sort) {
+            this.stateController.sorting.reset(key);
+        }
+        if (!config.filter) {
+            this.stateController.filtering.reset(key);
+        }
+        this.columns = this.columns.map(each => {
+            if (key === each.key) {
+                each = { ...each, ...config };
+            }
+            return each;
+        });
+        this.requestUpdate();
+    }
+    bodyClickHandler(event) {
+        const target = event.composedPath().find(el => el instanceof ApexGridCell);
+        if (target) {
+            this.stateController.active = {
+                column: target.column.key,
+                row: target.row.index,
+            };
+        }
+    }
+    bodyKeydownHandler(event) {
+        const target = event.target;
+        if (this.bodyElement.isSameNode(target)) {
+            this.stateController.navigation.navigate(event, this.bodyElement);
+        }
+    }
+    renderHeaderRow() {
+        return html `<apex-grid-header-row
+      style=${styleMap(this.DOM.columnSizes)}
+      .columns=${this.columns}
+    ></apex-grid-header-row>`;
+    }
+    renderBody() {
+        return html `<apex-grid-body
+      @keydown=${this.bodyKeydownHandler}
+      @click=${this.bodyClickHandler}
+      .items=${this.dataState}
+      .renderItem=${this.rowRenderer}
+    ></apex-grid-body>`;
+    }
+    renderFilterRow() {
+        return this.columns.some(column => column.filter)
+            ? html `<apex-filter-row style=${styleMap(this.DOM.columnSizes)}></apex-filter-row>`
+            : nothing;
+    }
+    render() {
+        return html `${this.stateController.resizing.renderIndicator()}${this.renderHeaderRow()}${this.renderFilterRow()}${this.renderBody()}`;
+    }
+};
+ApexGrid.styles = bootstrap;
+__decorate([
+    query(ApexGridBody.is)
+], ApexGrid.prototype, "bodyElement", void 0);
+__decorate([
+    query(ApexGridHeaderRow.is)
+], ApexGrid.prototype, "headerRow", void 0);
+__decorate([
+    query(ApexFilterRow.is)
+], ApexGrid.prototype, "filterRow", void 0);
+__decorate([
+    state()
+], ApexGrid.prototype, "dataState", void 0);
+__decorate([
+    queryAll(ApexGridRow.is)
+], ApexGrid.prototype, "_rows", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-generate' })
+], ApexGrid.prototype, "autoGenerate", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "sortConfiguration", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "remoteConfiguration", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "sortExpressions", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "filterExpressions", void 0);
+__decorate([
+    watch('sortExpressions')
+], ApexGrid.prototype, "watchSortExpressions", null);
+__decorate([
+    watch('filterExpressions')
+], ApexGrid.prototype, "watchFilterExpressions", null);
+__decorate([
+    watch('columns')
+], ApexGrid.prototype, "watchColumns", null);
+__decorate([
+    watch('data')
+], ApexGrid.prototype, "dataChanged", null);
+__decorate([
+    watch(PIPELINE)
+], ApexGrid.prototype, "pipeline", null);
+__decorate([
+    eventOptions({ capture: true })
+], ApexGrid.prototype, "bodyClickHandler", null);
+ApexGrid = __decorate([
+    themes({
+        bootstrap,
+        fluent,
+        indigo,
+        material,
+    }),
+    customElement(GRID_TAG)
+], ApexGrid);
+export default ApexGrid;
+//# sourceMappingURL=grid.js.map

package/dist/src/components/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyDeclaration, TemplateResult } from 'lit';\nimport { ContextProvider } from '@lit-labs/context';\nimport { customElement, eventOptions, property, query, queryAll, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { GRID_TAG } from '../internal/tags.js';\nimport { StateController, gridStateContext } from '../controllers/state.js';\nimport { DataOperationsController } from '../controllers/data-operation.js';\nimport { GridDOMController } from '../controllers/dom.js';\nimport { EventEmitterBase } from '../internal/mixins/event-emitter.js';\nimport { watch } from '../internal/watch.js';\nimport { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';\nimport { registerGridIcons } from '../internal/icon-registry.js';\nimport { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';\n\nimport type {\n  ColumnConfiguration,\n  GridRemoteConfig,\n  GridSortConfiguration,\n  Keys,\n} from '../internal/types.js';\nimport type { FilterExpressionTree } from '../operations/filter/tree.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\nimport type { SortExpression } from '../operations/sort/types.js';\n\nimport { default as bootstrap } from '../styles/grid/themes/light/grid.bootstrap-styles.js';\nimport { default as fluent } from '../styles/grid/themes/light/grid.fluent-styles.js';\nimport { default as indigo } from '../styles/grid/themes/light/grid.indigo-styles.js';\nimport { default as material } from '../styles/grid/themes/light/grid.material-styles.js';\n\nimport ApexGridBody from './grid-body.js';\nimport ApexGridHeaderRow from './header-row.js';\nimport ApexGridRow from './row.js';\nimport ApexGridCell from './cell.js';\nimport ApexFilterRow from './filter-row.js';\n\nimport { themes } from 'igniteui-webcomponents/theming/theming-decorator.js';\nimport {\n  defineComponents,\n  IgcButtonComponent,\n  IgcChipComponent,\n  IgcDropdownComponent,\n  IgcInputComponent,\n  IgcIconComponent,\n  IgcDropdownItemComponent,\n} from 'igniteui-webcomponents';\n\ndefineComponents(\n  IgcButtonComponent,\n  IgcChipComponent,\n  IgcInputComponent,\n  IgcDropdownComponent,\n  IgcIconComponent,\n  IgcDropdownItemComponent,\n);\n\n/**\n * Event object for the filtering event of the grid.\n */\nexport interface ApexFilteringEvent<T extends object> {\n  /**\n   * The filter expression to apply.\n   */\n  expression: FilterExpression<T>;\n  /**\n   * The filter state of the column.\n   */\n  state: FilterExpressionTree<T>;\n}\n\n// TODO: Subject to change as these are way too generic names\n/**\n * Events for the apex-grid.\n */\nexport interface ApexGridEventMap<T extends object> {\n  /**\n   * Emitted when sorting is initiated through the UI.\n   * Returns the sort expression which will be used for the operation.\n   *\n   * @remarks\n   * The event is cancellable which prevents the operation from being applied.\n   * The expression can be modified prior to the operation running.\n   *\n   * @event\n   */\n  sorting: CustomEvent<SortExpression<T>>;\n  /**\n   * Emitted when a sort operation initiated through the UI has completed.\n   * Returns the sort expression used for the operation.\n   *\n   * @event\n   */\n  sorted: CustomEvent<SortExpression<T>>;\n  /**\n   * Emitted when filtering is initiated through the UI.\n   *\n   * @remarks\n   * The event is cancellable which prevents the operation from being applied.\n   * The expression can be modified prior to the operation running.\n   *\n   * @event\n   */\n  filtering: CustomEvent<ApexFilteringEvent<T>>;\n  /**\n   * Emitted when a filter operation initiated through the UI has completed.\n   * Returns the filter state for the affected column.\n   *\n   * @event\n   */\n  filtered: CustomEvent<FilterExpressionTree<T>>;\n}\n\n/**\n * Apex grid is a web component for displaying data in a tabular format quick and easy.\n *\n * Out of the box it provides row virtualization, sort and filter operations (client and server side),\n * the ability to template cells and headers and column hiding.\n *\n * @element apex-grid\n *\n * @fires sorting - Emitted when sorting is initiated through the UI.\n * @fires sorted - Emitted when a sort operation initiated through the UI has completed.\n * @fires filtering - Emitted when filtering is initiated through the UI.\n * @fires filtered - Emitted when a filter operation initiated through the UI has completed.\n *\n */\n@themes({\n  bootstrap,\n  fluent,\n  indigo,\n  material,\n})\n@customElement(GRID_TAG)\nexport default class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMap<T>> {\n  public static get is() {\n    return GRID_TAG;\n  }\n\n  public static override styles = bootstrap;\n\n  protected stateController = new StateController<T>(this);\n  protected DOM = new GridDOMController<T>(this, this.stateController);\n  protected dataController = new DataOperationsController<T>(this);\n\n  protected rowRenderer = <T>(data: T, index: number): TemplateResult => {\n    return html`<apex-grid-row\n      part=\"row\"\n      style=${styleMap({ ...this.DOM.columnSizes, ...this.DOM.getActiveRowStyles(index) })}\n      .index=${index}\n      .activeNode=${this.stateController.active}\n      .data=${data}\n      .columns=${this.columns}\n    ></apex-grid-row>`;\n  };\n\n  protected stateProvider = new ContextProvider(this, gridStateContext, this.stateController);\n\n  @query(ApexGridBody.is)\n  protected bodyElement!: ApexGridBody;\n\n  @query(ApexGridHeaderRow.is)\n  protected headerRow!: ApexGridHeaderRow<T>;\n\n  @query(ApexFilterRow.is)\n  protected filterRow!: ApexFilterRow<T>;\n\n  @state()\n  protected dataState: Array<T> = [];\n\n  @queryAll(ApexGridRow.is)\n  protected _rows!: NodeListOf<ApexGridRow<T>>;\n\n  /** Column configuration for the grid. */\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  /** The data source for the grid. */\n  @property({ attribute: false })\n  public data: Array<T> = [];\n\n  /**\n   * Whether the grid will try to \"resolve\" its column configuration based on the passed\n   * data source.\n   *\n   * @remarks\n   * This is a one-time operation which is executed when the grid is initially added to the DOM.\n   * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually\n   * result in empty column configuration for the grid.\n   *\n   * This property is ignored if any existing column configuration already exists in the grid.\n   */\n  @property({ type: Boolean, attribute: 'auto-generate' })\n  public autoGenerate = false;\n\n  /** Sort configuration property for the grid. */\n  @property({ attribute: false })\n  public sortConfiguration: GridSortConfiguration = {\n    multiple: true,\n    triState: true,\n  };\n\n  /**\n   * Configuration object which controls remote data operations for the grid.\n   */\n  @property({ attribute: false })\n  public remoteConfiguration?: GridRemoteConfig<T>;\n\n  /**\n   * Set sort state for the apex grid.\n   *\n   * @remarks\n   *\n   */\n  @property({ attribute: false })\n  public sortExpressions: SortExpression<T>[] = [];\n\n  /**\n   * Set filter state for the apex grid.\n   */\n  @property({ attribute: false })\n  public filterExpressions: FilterExpression<T>[] = [];\n\n  /**\n   * Returns the collection of rendered row elements in the grid.\n   *\n   * @remarks\n   * Since the grid has virtualization, this property returns only the currently rendered\n   * chunk of elements in the DOM.\n   */\n  public get rows() {\n    return Array.from(this._rows);\n  }\n\n  /**\n   * Returns the state of the data source after sort/filter operations\n   * have been applied.\n   */\n  public get dataView(): ReadonlyArray<T> {\n    return this.dataState;\n  }\n\n  /**\n   * The total number of items in the {@link ApexGrid.dataView} collection.\n   */\n  public get totalItems() {\n    return this.dataState.length;\n  }\n\n  constructor() {\n    super();\n    registerGridIcons();\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    autoGenerateColumns(this);\n  }\n\n  public override requestUpdate(\n    name?: PropertyKey,\n    oldValue?: unknown,\n    options?: PropertyDeclaration<this, unknown>,\n  ): void {\n    this.headerRow?.requestUpdate();\n    this.filterRow?.requestUpdate();\n    super.requestUpdate(name, oldValue, options);\n  }\n\n  @watch('sortExpressions')\n  protected watchSortExpressions() {\n    if (this.sortExpressions.length) {\n      this.sort(this.sortExpressions);\n    }\n  }\n\n  @watch('filterExpressions')\n  protected watchFilterExpressions() {\n    if (this.filterExpressions.length) {\n      this.filter(this.filterExpressions);\n    }\n  }\n\n  @watch('columns')\n  protected watchColumns(_: ColumnConfiguration<T>[], newConfig: ColumnConfiguration<T>[] = []) {\n    this.columns = newConfig.map(config => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));\n  }\n\n  @watch('data')\n  protected dataChanged() {\n    this.dataState = structuredClone(this.data);\n    if (this.hasUpdated) {\n      this.pipeline();\n    }\n  }\n\n  @watch(PIPELINE)\n  protected async pipeline() {\n    this.dataState = await this.dataController.apply(\n      structuredClone(this.data),\n      this.stateController,\n    );\n  }\n\n  /**\n   * Performs a filter operation in the grid based on the passed expression(s).\n   */\n  public filter(config: FilterExpression<T> | FilterExpression<T>[]) {\n    this.stateController.filtering.filter(\n      asArray(config).map(each =>\n        typeof each.condition === 'string'\n          ? Object.assign(each, {\n              condition: getFilterOperandsFor(this.getColumn(each.key)!).get(each.condition as any),\n            })\n          : each,\n      ),\n    );\n  }\n\n  /**\n   * Performs a sort operation in the grid based on the passed expression(s).\n   */\n  public sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n    this.stateController.sorting.sort(expressions);\n  }\n\n  /**\n   * Returns a {@link ColumnConfiguration} for a given column.\n   */\n  public getColumn(id: Keys<T> | number) {\n    return typeof id === 'number'\n      ? this.columns.at(id)\n      : this.columns.find(({ key }) => key === id);\n  }\n\n  /**\n   * Updates the column configuration of the grid.\n   */\n  public updateColumn(key: Keys<T>, config: Partial<ColumnConfiguration<T>>) {\n    // Check and reset data operation states\n    // TODO: Run `pipeline` updates ?\n    if (!config.sort) {\n      this.stateController.sorting.reset(key);\n    }\n\n    if (!config.filter) {\n      this.stateController.filtering.reset(key);\n    }\n\n    this.columns = this.columns.map(each => {\n      if (key === each.key) {\n        each = { ...each, ...config };\n      }\n      return each;\n    });\n\n    this.requestUpdate();\n  }\n\n  @eventOptions({ capture: true })\n  protected bodyClickHandler(event: MouseEvent) {\n    const target = event.composedPath().find(el => el instanceof ApexGridCell) as ApexGridCell<T>;\n    if (target) {\n      this.stateController.active = {\n        column: target.column.key,\n        row: target.row.index,\n      };\n    }\n  }\n\n  protected bodyKeydownHandler(event: KeyboardEvent) {\n    const target = event.target as HTMLElement & ApexGridBody;\n    if (this.bodyElement.isSameNode(target)) {\n      this.stateController.navigation.navigate(event, this.bodyElement);\n    }\n  }\n\n  protected renderHeaderRow() {\n    return html`<apex-grid-header-row\n      style=${styleMap(this.DOM.columnSizes)}\n      .columns=${this.columns}\n    ></apex-grid-header-row>`;\n  }\n\n  protected renderBody() {\n    return html`<apex-grid-body\n      @keydown=${this.bodyKeydownHandler}\n      @click=${this.bodyClickHandler}\n      .items=${this.dataState}\n      .renderItem=${this.rowRenderer}\n    ></apex-grid-body>`;\n  }\n\n  protected renderFilterRow() {\n    return this.columns.some(column => column.filter)\n      ? html`<apex-filter-row style=${styleMap(this.DOM.columnSizes)}></apex-filter-row>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`${this.stateController.resizing.renderIndicator()}${this.renderHeaderRow()}${this.renderFilterRow()}${this.renderBody()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGrid.is]: ApexGrid<object>;\n  }\n}\n"]}

package/dist/src/components/header-row.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { StateController } from '../controllers/state.js';
+import ApexGridHeader from './header.js';
+import type { ColumnConfiguration } from '../internal/types.js';
+export default class ApexGridHeaderRow<T extends object> extends LitElement {
+    #private;
+    static get is(): "apex-grid-header-row";
+    static styles: import("lit").CSSResult;
+    protected _headers: NodeListOf<ApexGridHeader<T>>;
+    state: StateController<T>;
+    columns: Array<ColumnConfiguration<T>>;
+    get headers(): ApexGridHeader<T>[];
+    constructor();
+    connectedCallback(): void;
+    protected shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, this>): boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [ApexGridHeaderRow.is]: ApexGridHeaderRow<object>;
+    }
+}
+//# sourceMappingURL=header-row.d.ts.map

package/dist/src/components/header-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-row.d.ts","sourceRoot":"","sources":["../../../src/components/header-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAIlE,OAAO,EAAoB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI5E,OAAO,cAAc,MAAM,aAAa,CAAC;AAGzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,CAAC,OAAO,OAAO,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,UAAU;;IACzE,WAAkB,EAAE,2BAEnB;IACD,OAAuB,MAAM,0BAAU;IAGvC,SAAS,CAAC,QAAQ,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAI5C,KAAK,EAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAG3B,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAM;IAEnD,IAAW,OAAO,wBAEjB;;IAOe,iBAAiB;cAcd,YAAY,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,OAAO;cAK7E,MAAM;CAc1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;KACnD;CACF"}

package/dist/src/components/header-row.js

@@ -0,0 +1,77 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ApexGridHeaderRow_instances, _ApexGridHeaderRow_activeFilterColumn;
+import { html, LitElement, nothing } from 'lit';
+import { contextProvided } from '@lit-labs/context';
+import { customElement, property, queryAll } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { gridStateContext } from '../controllers/state.js';
+import { partNameMap } from '../internal/part-map.js';
+import { GRID_HEADER_ROW_TAG } from '../internal/tags.js';
+import ApexGridHeader from './header.js';
+import styles from '../styles/header-row/header-row.base-styles.js';
+let ApexGridHeaderRow = class ApexGridHeaderRow extends LitElement {
+    static get is() {
+        return GRID_HEADER_ROW_TAG;
+    }
+    get headers() {
+        return Array.from(this._headers);
+    }
+    constructor() {
+        super();
+        _ApexGridHeaderRow_instances.add(this);
+        this.columns = [];
+        this.addEventListener('click', __classPrivateFieldGet(this, _ApexGridHeaderRow_instances, "m", _ApexGridHeaderRow_activeFilterColumn));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('tabindex', '0');
+    }
+    shouldUpdate(props) {
+        this.headers.forEach(header => header.requestUpdate());
+        return super.shouldUpdate(props);
+    }
+    render() {
+        const filterRow = this.state.filtering.filterRow;
+        return html `${map(this.columns, column => column.hidden
+            ? nothing
+            : html `<apex-grid-header
+            part=${partNameMap({
+                filtered: column === (filterRow === null || filterRow === void 0 ? void 0 : filterRow.column),
+            })}
+            .column=${column}
+          ></apex-grid-header>`)}`;
+    }
+};
+_ApexGridHeaderRow_instances = new WeakSet(), _ApexGridHeaderRow_activeFilterColumn = function _ApexGridHeaderRow_activeFilterColumn(event) {
+    const header = event
+        .composedPath()
+        .filter(target => target instanceof ApexGridHeader)
+        .at(0);
+    this.state.filtering.setActiveColumn(header === null || header === void 0 ? void 0 : header.column);
+};
+ApexGridHeaderRow.styles = styles;
+__decorate([
+    queryAll(ApexGridHeader.is)
+], ApexGridHeaderRow.prototype, "_headers", void 0);
+__decorate([
+    contextProvided({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexGridHeaderRow.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridHeaderRow.prototype, "columns", void 0);
+ApexGridHeaderRow = __decorate([
+    customElement(GRID_HEADER_ROW_TAG)
+], ApexGridHeaderRow);
+export default ApexGridHeaderRow;
+//# sourceMappingURL=header-row.js.map

package/dist/src/components/header-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-row.js","sourceRoot":"","sources":["../../../src/components/header-row.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAoB,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAmB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,cAAc,MAAM,aAAa,CAAC;AACzC,OAAO,MAAM,MAAM,gDAAgD,CAAC;AAKrD,IAAM,iBAAiB,GAAvB,MAAM,iBAAoC,SAAQ,UAAU;IAClE,MAAM,KAAK,EAAE;QAClB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAaD,IAAW,OAAO;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAPH,YAAO,GAAkC,EAAE,CAAC;QAQjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,2EAAoB,CAAC,CAAC;IAC3D,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;IAWkB,YAAY,CAAC,KAAsD;QACpF,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;QACvD,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAEkB,MAAM;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QAEjD,OAAO,IAAI,CAAA,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,CACvC,MAAM,CAAC,MAAM;YACX,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;mBACK,WAAW,CAAC;gBACjB,QAAQ,EAAE,MAAM,MAAK,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAA;aACvC,CAAC;sBACQ,MAAM;+BACG,CAC1B,EAAE,CAAC;IACN,CAAC;;qIA3BmB,KAAiB;IACnC,MAAM,MAAM,GAAG,KAAK;SACjB,YAAY,EAAE;SACd,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,YAAY,cAAc,CAAC;SAClD,EAAE,CAAC,CAAC,CAAsB,CAAC;IAE9B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,CAAC;AACvD,CAAC;AAjCsB,wBAAM,GAAG,MAAM,CAAC;AAGvC;IADC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;mDACuB;AAInD;IAFC,eAAe,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC/D,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gDACG;AAGlC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACoB;AAdhC,iBAAiB;IADrC,aAAa,CAAC,mBAAmB,CAAC;GACd,iBAAiB,CA0DrC;eA1DoB,iBAAiB","sourcesContent":["import { html, LitElement, nothing, PropertyValueMap } from 'lit';\nimport { contextProvided } from '@lit-labs/context';\nimport { customElement, property, queryAll } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { gridStateContext, StateController } from '../controllers/state.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { GRID_HEADER_ROW_TAG } from '../internal/tags.js';\n\nimport ApexGridHeader from './header.js';\nimport styles from '../styles/header-row/header-row.base-styles.js';\n\nimport type { ColumnConfiguration } from '../internal/types.js';\n\n@customElement(GRID_HEADER_ROW_TAG)\nexport default class ApexGridHeaderRow<T extends object> extends LitElement {\n  public static get is() {\n    return GRID_HEADER_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  @queryAll(ApexGridHeader.is)\n  protected _headers!: NodeListOf<ApexGridHeader<T>>;\n\n  @contextProvided({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  public get headers() {\n    return Array.from(this._headers);\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.#activeFilterColumn);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('tabindex', '0');\n  }\n\n  #activeFilterColumn(event: MouseEvent) {\n    const header = event\n      .composedPath()\n      .filter(target => target instanceof ApexGridHeader)\n      .at(0) as ApexGridHeader<T>;\n\n    this.state.filtering.setActiveColumn(header?.column);\n  }\n\n  protected override shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, this>): boolean {\n    this.headers.forEach(header => header.requestUpdate());\n    return super.shouldUpdate(props);\n  }\n\n  protected override render() {\n    const filterRow = this.state.filtering.filterRow;\n\n    return html`${map(this.columns, column =>\n      column.hidden\n        ? nothing\n        : html`<apex-grid-header\n            part=${partNameMap({\n              filtered: column === filterRow?.column,\n            })}\n            .column=${column}\n          ></apex-grid-header>`,\n    )}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridHeaderRow.is]: ApexGridHeaderRow<object>;\n  }\n}\n"]}