igniteui-grid-lite 0.9.0 → 0.10.0

package/controllers/resize.js

@@ -2,40 +2,49 @@ import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';
 export class ResizeController {
-    constructor(host) {
-        this.host = host;
+    constructor(_state, _dom) {
+        this._state = _state;
+        this._dom = _dom;
         this.indicatorActive = false;
         this.indicatorOffset = 0;
         this.host.addController(this);
     }
+    get host() {
+        return this._state.host;
+    }
     #maxSize(key, headerWidth) {
-        const max = this.host.rows
-            .map((row) => row.cells.find((cell) => cell.column.field === key))
-            .reduce((prev, current) => (current.offsetWidth > prev ? current.offsetWidth : prev), 0);
-        return Math.max(...[MIN_COL_RESIZE_WIDTH, max, headerWidth]);
+        const max = this._dom.rows.reduce((prev, row) => {
+            const cell = row.cells.find((cell) => cell.column.field === key);
+            return cell && cell.offsetWidth > prev ? cell.offsetWidth : prev;
+        }, 0);
+        return Math.max(MIN_COL_RESIZE_WIDTH, max, headerWidth);
+    }
+    #setWidth(column, width) {
+        this._state.setColumnWidth(column.field, width);
+    }
+    #indicatorChanged() {
+        this.host.requestUpdate();
+        this._state.updateObservers();
     }
     start(header) {
         this.indicatorActive = true;
         this.indicatorOffset = header.offsetLeft + header.offsetWidth;
-        this.host.requestUpdate();
+        this.#indicatorChanged();
     }
     stop() {
         this.indicatorActive = false;
-        this.host.requestUpdate();
+        this.#indicatorChanged();
     }
     resize(column, width, sizerOffset) {
         if (sizerOffset) {
             this.indicatorOffset = sizerOffset;
         }
-        column.width = `${width}px`;
-        this.host.requestUpdate();
+        this.#setWidth(column, `${width}px`);
     }
     async autosize(column, header) {
-        column.width = 'max-content';
-        this.host.requestUpdate();
+        this.#setWidth(column, 'max-content');
         await this.host.updateComplete;
-        column.width = `${this.#maxSize(column.field, header.offsetWidth)}px`;
-        this.host.requestUpdate();
+        this.#setWidth(column, `${this.#maxSize(column.field, header.offsetWidth)}px`);
     }
     hostConnected() { }
     renderIndicator() {

package/controllers/resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../src/controllers/resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA2B,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,MAAM,OAAO,gBAAgB;IAC3B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAIhC,oBAAe,GAAG,KAAK,CAAC;QACxB,oBAAe,GAAG,CAAC,CAAC;QAJzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAKD,QAAQ,CAAC,GAAY,EAAE,WAAmB;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI;aACvB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,GAAG,CAAE,CAAC;aAClE,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE3F,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;IAC/D,CAAC;IAOM,KAAK,CAAC,MAA4B;QACvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAKM,IAAI;QACT,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,MAAM,CAAC,MAA8B,EAAE,KAAa,EAAE,WAAoB;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC;QACrC,CAAC;QAED,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,KAAK,CAAC,QAAQ,CAAC,MAA8B,EAAE,MAA4B;QAChF,MAAM,CAAC,KAAK,GAAG,aAAa,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAE/B,MAAM,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;QACtE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,aAAa,KAAI,CAAC;IAKlB,eAAe;QACpB,OAAO,IAAI,CAAC,eAAe;YACzB,CAAC,CAAC,IAAI,CAAA;;kBAEM,QAAQ,CAAC;gBACf,SAAS,EAAE,cAAc,IAAI,CAAC,eAAe,KAAK;aACnD,CAAC;gBACI;YACV,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;CACF","sourcesContent":["import { html, nothing, type ReactiveController } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type IgcGridLiteHeader from '../components/header.js';\nimport { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\n\nexport class ResizeController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public indicatorActive = false;\n  public indicatorOffset = 0;\n\n  #maxSize(key: Keys<T>, headerWidth: number) {\n    const max = this.host.rows\n      .map((row) => row.cells.find((cell) => cell.column.field === key)!)\n      .reduce((prev, current) => (current.offsetWidth > prev ? current.offsetWidth : prev), 0);\n\n    return Math.max(...[MIN_COL_RESIZE_WIDTH, max, headerWidth]);\n  }\n\n  /**\n   * Begins resizing a column by showing and positioning the resize indicator in relation to the column.\n   *\n   * @param header the\n   */\n  public start(header: IgcGridLiteHeader<T>) {\n    this.indicatorActive = true;\n    this.indicatorOffset = header.offsetLeft + header.offsetWidth;\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Stops and resets the resizing state.\n   */\n  public stop() {\n    this.indicatorActive = false;\n    this.host.requestUpdate();\n  }\n\n  public resize(column: ColumnConfiguration<T>, width: number, sizerOffset?: number) {\n    if (sizerOffset) {\n      this.indicatorOffset = sizerOffset;\n    }\n\n    column.width = `${width}px`;\n    this.host.requestUpdate();\n  }\n\n  public async autosize(column: ColumnConfiguration<T>, header: IgcGridLiteHeader<T>) {\n    column.width = 'max-content';\n\n    this.host.requestUpdate();\n    await this.host.updateComplete;\n\n    column.width = `${this.#maxSize(column.field, header.offsetWidth)}px`;\n    this.host.requestUpdate();\n  }\n\n  public hostConnected() {}\n\n  /**\n   * Renders the resize indicator in the grid.\n   */\n  public renderIndicator() {\n    return this.indicatorActive\n      ? html`<div\n          part=\"resize-indicator\"\n          style=${styleMap({\n            transform: `translateX(${this.indicatorOffset}px)`,\n          })}\n        ></div>`\n      : nothing;\n  }\n}\n"]}
+{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../src/controllers/resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA2B,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAKhE,MAAM,OAAO,gBAAgB;IAC3B,YACY,MAA0B,EAC1B,IAA0B;QAD1B,WAAM,GAAN,MAAM,CAAoB;QAC1B,SAAI,GAAJ,IAAI,CAAsB;QAK/B,oBAAe,GAAG,KAAK,CAAC;QACxB,oBAAe,GAAG,CAAC,CAAC;QAJzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAKD,IAAc,IAAI;QAChB,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;IAC1B,CAAC;IAED,QAAQ,CAAC,GAAY,EAAE,WAAmB;QAExC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YAC9C,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;YACjE,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;QACnE,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,IAAI,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC;IAC1D,CAAC;IAGD,SAAS,CAAC,MAA8B,EAAE,KAAa;QACrD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC;IAChC,CAAC;IAGM,KAAK,CAAC,MAA4B;QACvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;QAC9D,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAKM,IAAI;QACT,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEM,MAAM,CAAC,MAA8B,EAAE,KAAa,EAAE,WAAoB;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IACvC,CAAC;IAEM,KAAK,CAAC,QAAQ,CAAC,MAA8B,EAAE,MAA4B;QAEhF,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACtC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAE/B,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACjF,CAAC;IAEM,aAAa,KAAI,CAAC;IAKlB,eAAe;QACpB,OAAO,IAAI,CAAC,eAAe;YACzB,CAAC,CAAC,IAAI,CAAA;;kBAEM,QAAQ,CAAC;gBACf,SAAS,EAAE,cAAc,IAAI,CAAC,eAAe,KAAK;aACnD,CAAC;gBACI;YACV,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;CACF","sourcesContent":["import { html, nothing, type ReactiveController } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type IgcGridLiteHeader from '../components/header.js';\nimport { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';\nimport type { ColumnConfiguration, Keys } from '../internal/types.js';\nimport type { GridDOMController } from './dom.js';\nimport type { StateController } from './state.js';\n\nexport class ResizeController<T extends object> implements ReactiveController {\n  constructor(\n    protected _state: StateController<T>,\n    protected _dom: GridDOMController<T>\n  ) {\n    this.host.addController(this);\n  }\n\n  public indicatorActive = false;\n  public indicatorOffset = 0;\n\n  protected get host() {\n    return this._state.host;\n  }\n\n  #maxSize(key: Keys<T>, headerWidth: number) {\n    // A rendered row may not carry a cell for the column (e.g. it was just hidden).\n    const max = this._dom.rows.reduce((prev, row) => {\n      const cell = row.cells.find((cell) => cell.column.field === key);\n      return cell && cell.offsetWidth > prev ? cell.offsetWidth : prev;\n    }, 0);\n\n    return Math.max(MIN_COL_RESIZE_WIDTH, max, headerWidth);\n  }\n\n  /** Column objects are immutable. Widths are set through the state. */\n  #setWidth(column: ColumnConfiguration<T>, width: string) {\n    this._state.setColumnWidth(column.field, width);\n  }\n\n  /** The grid renders the indicator. Each header renders its `resizing` part. */\n  #indicatorChanged() {\n    this.host.requestUpdate();\n    this._state.updateObservers();\n  }\n\n  /** Starts a column resize: shows the indicator and aligns it with the header. */\n  public start(header: IgcGridLiteHeader<T>) {\n    this.indicatorActive = true;\n    this.indicatorOffset = header.offsetLeft + header.offsetWidth;\n    this.#indicatorChanged();\n  }\n\n  /**\n   * Stops and resets the resizing state.\n   */\n  public stop() {\n    this.indicatorActive = false;\n    this.#indicatorChanged();\n  }\n\n  public resize(column: ColumnConfiguration<T>, width: number, sizerOffset?: number) {\n    if (sizerOffset) {\n      this.indicatorOffset = sizerOffset;\n    }\n\n    this.#setWidth(column, `${width}px`);\n  }\n\n  public async autosize(column: ColumnConfiguration<T>, header: IgcGridLiteHeader<T>) {\n    // Measure the column at its natural size first, then pin the result in pixels.\n    this.#setWidth(column, 'max-content');\n    await this.host.updateComplete;\n\n    this.#setWidth(column, `${this.#maxSize(column.field, header.offsetWidth)}px`);\n  }\n\n  public hostConnected() {}\n\n  /**\n   * Renders the resize indicator in the grid.\n   */\n  public renderIndicator() {\n    return this.indicatorActive\n      ? html`<div\n          part=\"resize-indicator\"\n          style=${styleMap({\n            transform: `translateX(${this.indicatorOffset}px)`,\n          })}\n        ></div>`\n      : nothing;\n  }\n}\n"]}

package/controllers/sort.d.ts

@@ -1,12 +1,21 @@
 import type { ReactiveController } from 'lit';
-import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
+import type { ColumnConfiguration, Keys } from '../internal/types.js';
 import type { SortingExpression, SortState } from '../operations/sort/types.js';
+import type { StateController } from './state.js';
 export declare class SortController<T extends object> implements ReactiveController {
     #private;
-    protected host: GridHost<T>;
-    constructor(host: GridHost<T>);
+    protected _state: StateController<T>;
+    constructor(_state: StateController<T>);
     state: SortState<T>;
+    protected get host(): import("../internal/types.js").GridHost<T>;
     sortFromHeaderClick(column: ColumnConfiguration<T>): Promise<void>;
+    /**
+     * Returns the expression the next sort operation would apply for `column`.
+     *
+     * @remarks
+     * The result is a candidate copy - the stored state is only updated once the
+     * operation is committed through {@link SortController._sort}.
+     */
     prepareExpression(column: ColumnConfiguration<T>): SortingExpression<T>;
     reset(key?: Keys<T>): void;
     protected _sort(expressions: SortingExpression<T> | SortingExpression<T>[]): void;

package/controllers/sort.js

@@ -1,29 +1,27 @@
 import { PIPELINE } from '../internal/constants.js';
 import { asArray } from '../internal/utils.js';
+const NEXT_DIRECTION = {
+    ascending: 'descending',
+    descending: 'none',
+    none: 'ascending',
+};
 export class SortController {
-    constructor(host) {
-        this.host = host;
+    constructor(_state) {
+        this._state = _state;
         this.state = new Map();
         this.host.addController(this);
     }
+    get host() {
+        return this._state.host;
+    }
     get #isMultipleSort() {
         return this.host.sortingOptions.mode === 'multiple';
     }
-    get #isTriStateSort() {
-        return true;
-    }
     #resolveSortOptions(column) {
-        const expr = {
-            caseSensitive: false,
-            comparer: undefined,
+        return {
+            caseSensitive: column?.sortingCaseSensitive ?? false,
+            comparer: column?.sortConfiguration?.comparer,
         };
-        if (!column) {
-            return expr;
-        }
-        return Object.assign(expr, {
-            caseSensitive: column.sortingCaseSensitive,
-            comparer: column.sortConfiguration?.comparer,
-        });
     }
     #createDefaultExpression(key) {
         const column = this.host.getColumn(key);
@@ -33,17 +31,6 @@ export class SortController {
             ...this.#resolveSortOptions(column),
         };
     }
-    #orderBy(dir) {
-        return this.#isTriStateSort
-            ? dir === 'ascending'
-                ? 'descending'
-                : dir === 'descending'
-                    ? 'none'
-                    : 'ascending'
-            : dir === 'ascending'
-                ? 'descending'
-                : 'ascending';
-    }
     #emitSortingEvent(detail) {
         return this.host.emitEvent('sorting', { detail, cancelable: true });
     }
@@ -64,30 +51,36 @@ export class SortController {
             this.reset();
         }
         this._sort(expression);
-        await this.host.updateComplete;
+        await this.host._pipelineComplete;
         this.#emitSortedEvent(expression);
     }
     prepareExpression(column) {
         if (this.state.has(column.field)) {
             const expr = this.state.get(column.field);
-            return Object.assign(expr, {
-                direction: this.#orderBy(expr.direction),
+            return {
+                ...expr,
+                direction: NEXT_DIRECTION[expr.direction],
                 ...this.#resolveSortOptions(column),
-            });
+            };
         }
         return this.#createDefaultExpression(column.field);
     }
     reset(key) {
-        key ? this.state.delete(key) : this.state.clear();
+        key !== undefined ? this.state.delete(key) : this.state.clear();
+        this._state.updateObservers();
     }
     _sort(expressions) {
         for (const expr of asArray(expressions)) {
             this.#setExpression(expr);
         }
+        this._state.updateObservers();
         this.host.requestUpdate(PIPELINE);
     }
     sort(expressions) {
-        this._sort(asArray(expressions).map((expr) => Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)));
+        this._sort(asArray(expressions).map((expr) => ({
+            ...(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key)),
+            ...expr,
+        })));
     }
     hostConnected() { }
 }

package/controllers/sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../src/controllers/sort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\nimport { asArray } from '../internal/utils.js';\nimport type { SortingDirection, SortingExpression, SortState } from '../operations/sort/types.js';\n\nexport class SortController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public state: SortState<T> = new Map();\n\n  get #isMultipleSort() {\n    return this.host.sortingOptions.mode === 'multiple';\n  }\n\n  get #isTriStateSort() {\n    return true;\n  }\n\n  #resolveSortOptions(column?: ColumnConfiguration<T>) {\n    const expr: Pick<SortingExpression<T>, 'caseSensitive' | 'comparer'> = {\n      caseSensitive: false,\n      comparer: undefined,\n    };\n\n    if (!column) {\n      return expr as Partial<SortingExpression<T>>;\n    }\n\n    return Object.assign(expr, {\n      caseSensitive: column.sortingCaseSensitive,\n      comparer: column.sortConfiguration?.comparer,\n    }) as Partial<SortingExpression<T>>;\n  }\n\n  #createDefaultExpression(key: Keys<T>) {\n    const column = this.host.getColumn(key);\n\n    return {\n      key,\n      direction: 'ascending',\n      ...this.#resolveSortOptions(column),\n    } as SortingExpression<T>;\n  }\n\n  #orderBy(dir?: SortingDirection): SortingDirection {\n    return this.#isTriStateSort\n      ? dir === 'ascending'\n        ? 'descending'\n        : dir === 'descending'\n          ? 'none'\n          : 'ascending'\n      : dir === 'ascending'\n        ? 'descending'\n        : 'ascending';\n  }\n\n  #emitSortingEvent(detail: SortingExpression<T>) {\n    return this.host.emitEvent('sorting', { detail, cancelable: true });\n  }\n\n  #emitSortedEvent(detail: SortingExpression<T>) {\n    return this.host.emitEvent('sorted', { detail });\n  }\n\n  #setExpression(expression: SortingExpression<T>) {\n    expression.direction === 'none'\n      ? this.reset(expression.key)\n      : this.state.set(expression.key, { ...expression });\n  }\n\n  public async sortFromHeaderClick(column: ColumnConfiguration<T>) {\n    const expression = this.prepareExpression(column);\n\n    if (!this.#emitSortingEvent(expression)) {\n      return;\n    }\n\n    if (!this.#isMultipleSort) {\n      this.reset();\n    }\n\n    this._sort(expression);\n\n    await this.host.updateComplete;\n    this.#emitSortedEvent(expression);\n  }\n\n  public prepareExpression(column: ColumnConfiguration<T>): SortingExpression<T> {\n    if (this.state.has(column.field)) {\n      const expr = this.state.get(column.field)!;\n\n      return Object.assign(expr, {\n        direction: this.#orderBy(expr.direction),\n        ...this.#resolveSortOptions(column),\n      });\n    }\n\n    // Initial state\n    return this.#createDefaultExpression(column.field);\n  }\n\n  public reset(key?: Keys<T>) {\n    key ? this.state.delete(key) : this.state.clear();\n  }\n\n  protected _sort(expressions: SortingExpression<T> | SortingExpression<T>[]) {\n    for (const expr of asArray(expressions)) {\n      this.#setExpression(expr);\n    }\n\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public sort(expressions: SortingExpression<T> | SortingExpression<T>[]) {\n    this._sort(\n      asArray(expressions).map((expr) =>\n        Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)\n      )\n    );\n  }\n\n  public hostConnected() {}\n}\n"]}
+{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../src/controllers/sort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { ColumnConfiguration, Keys } from '../internal/types.js';\nimport { asArray } from '../internal/utils.js';\nimport type { SortingDirection, SortingExpression, SortState } from '../operations/sort/types.js';\nimport type { StateController } from './state.js';\n\n/** Tri-state cycle: ascending -> descending -> none -> ascending. */\nconst NEXT_DIRECTION: Record<SortingDirection, SortingDirection> = {\n  ascending: 'descending',\n  descending: 'none',\n  none: 'ascending',\n};\n\nexport class SortController<T extends object> implements ReactiveController {\n  constructor(protected _state: StateController<T>) {\n    this.host.addController(this);\n  }\n\n  public state: SortState<T> = new Map();\n\n  protected get host() {\n    return this._state.host;\n  }\n\n  get #isMultipleSort() {\n    return this.host.sortingOptions.mode === 'multiple';\n  }\n\n  #resolveSortOptions(column?: ColumnConfiguration<T>): Partial<SortingExpression<T>> {\n    return {\n      caseSensitive: column?.sortingCaseSensitive ?? false,\n      comparer: column?.sortConfiguration?.comparer,\n    } as Partial<SortingExpression<T>>;\n  }\n\n  #createDefaultExpression(key: Keys<T>) {\n    const column = this.host.getColumn(key);\n\n    return {\n      key,\n      direction: 'ascending',\n      ...this.#resolveSortOptions(column),\n    } as SortingExpression<T>;\n  }\n\n  #emitSortingEvent(detail: SortingExpression<T>) {\n    return this.host.emitEvent('sorting', { detail, cancelable: true });\n  }\n\n  #emitSortedEvent(detail: SortingExpression<T>) {\n    return this.host.emitEvent('sorted', { detail });\n  }\n\n  #setExpression(expression: SortingExpression<T>) {\n    expression.direction === 'none'\n      ? this.reset(expression.key)\n      : this.state.set(expression.key, { ...expression });\n  }\n\n  public async sortFromHeaderClick(column: ColumnConfiguration<T>) {\n    const expression = this.prepareExpression(column);\n\n    if (!this.#emitSortingEvent(expression)) {\n      return;\n    }\n\n    if (!this.#isMultipleSort) {\n      this.reset();\n    }\n\n    this._sort(expression);\n\n    await this.host._pipelineComplete;\n    this.#emitSortedEvent(expression);\n  }\n\n  /**\n   * Returns the expression the next sort operation would apply for `column`.\n   *\n   * @remarks\n   * The result is a candidate copy - the stored state is only updated once the\n   * operation is committed through {@link SortController._sort}.\n   */\n  public prepareExpression(column: ColumnConfiguration<T>): SortingExpression<T> {\n    if (this.state.has(column.field)) {\n      const expr = this.state.get(column.field)!;\n\n      return {\n        ...expr,\n        direction: NEXT_DIRECTION[expr.direction],\n        ...this.#resolveSortOptions(column),\n      };\n    }\n\n    // Initial state\n    return this.#createDefaultExpression(column.field);\n  }\n\n  public reset(key?: Keys<T>) {\n    key !== undefined ? this.state.delete(key) : this.state.clear();\n\n    // Headers render the sort indicator from this state.\n    this._state.updateObservers();\n  }\n\n  protected _sort(expressions: SortingExpression<T> | SortingExpression<T>[]) {\n    for (const expr of asArray(expressions)) {\n      this.#setExpression(expr);\n    }\n\n    this._state.updateObservers();\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public sort(expressions: SortingExpression<T> | SortingExpression<T>[]) {\n    // Merge into copies. Only `#setExpression` replaces the stored expression.\n    this._sort(\n      asArray(expressions).map((expr) => ({\n        ...(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key)),\n        ...expr,\n      }))\n    );\n  }\n\n  public hostConnected() {}\n}\n"]}

package/controllers/state.d.ts

@@ -1,14 +1,19 @@
-import type { ReactiveController } from 'lit';
-import type IgcFilterRow from '../components/filter-row.js';
-import type IgcGridLiteHeaderRow from '../components/header-row.js';
-import type IgcGridLiteRow from '../components/row.js';
-import type IgcVirtualizer from '../components/virtualizer.js';
-import type { ActiveNode, ColumnConfiguration, GridHost } from '../internal/types.js';
+import type { ActiveNode, ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
+import type { GridDOMController } from './dom.js';
 import { FilterController } from './filter.js';
 import { NavigationController } from './navigation.js';
 import { ResizeController } from './resize.js';
 import { SortController } from './sort.js';
-declare class StateController<T extends object> implements ReactiveController {
+/**
+ * Holds the column configuration of the grid and owns the controllers for its
+ * data operations. Column objects are immutable: each change produces new objects
+ * and a new array, so consumers can dirty-check by identity.
+ *
+ * @remarks
+ * Not a reactive controller: it has no host lifecycle. All DOM concerns live in
+ * {@link GridDOMController}.
+ */
+declare class StateController<T extends object> {
     private _columns;
     private readonly _observersCallback;
     /** The grid host element. */
@@ -18,24 +23,29 @@ declare class StateController<T extends object> implements ReactiveController {
     readonly navigation: NavigationController<T>;
     readonly resizing: ResizeController<T>;
     get columns(): ColumnConfiguration<T>[];
-    /** Returns the header row element of the grid. */
-    get headerRow(): IgcGridLiteHeaderRow<T> | null;
-    /** Returns the filter row element of the grid. */
-    get filterRow(): IgcFilterRow<T> | null;
-    /** Returns the data row elements of the grid. */
-    get rows(): IgcGridLiteRow<T>[];
-    /** Returns the virtualizer element of the grid. */
-    get virtualizer(): IgcVirtualizer | null;
     /** The currently active node in the grid. */
     get active(): ActiveNode<T>;
     /** Sets the currently active node in the grid. */
     set active(node: ActiveNode<T>);
-    constructor(host: GridHost<T>, observersCallback: () => void);
-    hostUpdate(): void;
+    constructor(host: GridHost<T>, dom: GridDOMController<T>, observersCallback: () => void);
+    /**
+     * Notifies the state context consumers (headers, header row, filter row) that
+     * their render inputs changed. Called at the mutation points only, never on
+     * each host update.
+     */
+    updateObservers(): void;
     setColumnConfiguration(columns: ColumnConfiguration<T>[]): void;
     setAutoColumnConfiguration(): void;
     updateColumnsConfiguration(config: ColumnConfiguration<T>[]): void;
+    /**
+     * Replaces the width of a single column with a new configuration object.
+     *
+     * @remarks
+     * Width has no effect on the data pipeline, so no pipeline run is scheduled.
+     * Resize drags call this on each pointer move.
+     */
+    setColumnWidth(field: Keys<T>, width: string): void;
 }
-declare function createStateController<T extends object>(host: GridHost<T>, observersCallback: () => void): StateController<T>;
+declare function createStateController<T extends object>(host: GridHost<T>, dom: GridDOMController<T>, observersCallback: () => void): StateController<T>;
 export type { StateController };
 export { createStateController };

package/controllers/state.js

@@ -1,5 +1,4 @@
 import { PIPELINE } from '../internal/constants.js';
-import { GRID_BODY, GRID_FILTER_ROW_TAG, GRID_HEADER_ROW_TAG, GRID_ROW_TAG, } from '../internal/tags.js';
 import { createColumnConfiguration, setColumnsFromData } from '../internal/utils.js';
 import { FilterController } from './filter.js';
 import { NavigationController } from './navigation.js';
@@ -9,42 +8,28 @@ class StateController {
     get columns() {
         return this._columns;
     }
-    get headerRow() {
-        return this.host.renderRoot.querySelector(GRID_HEADER_ROW_TAG);
-    }
-    get filterRow() {
-        return this.host.renderRoot.querySelector(GRID_FILTER_ROW_TAG);
-    }
-    get rows() {
-        return Array.from(this.host.renderRoot.querySelectorAll(GRID_ROW_TAG));
-    }
-    get virtualizer() {
-        return this.host.renderRoot.querySelector(GRID_BODY);
-    }
     get active() {
         return this.navigation.active;
     }
     set active(node) {
         this.navigation.active = node;
     }
-    constructor(host, observersCallback) {
+    constructor(host, dom, observersCallback) {
         this._columns = [];
         this._observersCallback = observersCallback;
         this.host = host;
-        this.host.addController(this);
-        this.sorting = new SortController(this.host);
-        this.filtering = new FilterController(this);
-        this.navigation = new NavigationController(this);
-        this.resizing = new ResizeController(this.host);
+        this.sorting = new SortController(this);
+        this.filtering = new FilterController(this, dom);
+        this.navigation = new NavigationController(this, dom);
+        this.resizing = new ResizeController(this, dom);
     }
-    hostUpdate() {
-        this.headerRow?.requestUpdate();
-        this.virtualizer?.requestUpdate();
+    updateObservers() {
+        this._observersCallback.call(this.host);
     }
     setColumnConfiguration(columns) {
         this._columns = columns.map((column) => createColumnConfiguration(column));
         this.filtering.resolveConditions();
-        this._observersCallback.call(this.host);
+        this.updateObservers();
         this.host.requestUpdate(PIPELINE);
     }
     setAutoColumnConfiguration() {
@@ -65,12 +50,21 @@ class StateController {
             }
         }
         this._columns = [...this._columns];
-        this._observersCallback.call(this.host);
+        this.updateObservers();
         this.host.requestUpdate(PIPELINE);
     }
+    setColumnWidth(field, width) {
+        const index = this._columns.findIndex((column) => column.field === field);
+        if (index === -1) {
+            return;
+        }
+        this._columns = this._columns.with(index, { ...this._columns[index], width });
+        this.updateObservers();
+        this.host.requestUpdate();
+    }
 }
-function createStateController(host, observersCallback) {
-    return new StateController(host, observersCallback);
+function createStateController(host, dom, observersCallback) {
+    return new StateController(host, dom, observersCallback);
 }
 export { createStateController };
 //# sourceMappingURL=state.js.map

package/controllers/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/controllers/state.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type IgcFilterRow from '../components/filter-row.js';\nimport type IgcGridLiteHeaderRow from '../components/header-row.js';\nimport type IgcGridLiteRow from '../components/row.js';\nimport type IgcVirtualizer from '../components/virtualizer.js';\nimport { PIPELINE } from '../internal/constants.js';\nimport {\n  GRID_BODY,\n  GRID_FILTER_ROW_TAG,\n  GRID_HEADER_ROW_TAG,\n  GRID_ROW_TAG,\n} from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration, GridHost } from '../internal/types.js';\nimport { createColumnConfiguration, setColumnsFromData } from '../internal/utils.js';\nimport { FilterController } from './filter.js';\nimport { NavigationController } from './navigation.js';\nimport { ResizeController } from './resize.js';\nimport { SortController } from './sort.js';\n\nclass StateController<T extends object> implements ReactiveController {\n  private _columns: ColumnConfiguration<T>[] = [];\n  private readonly _observersCallback: () => void;\n\n  /** The grid host element. */\n  public readonly host: GridHost<T>;\n\n  public readonly sorting: SortController<T>;\n  public readonly filtering: FilterController<T>;\n  public readonly navigation: NavigationController<T>;\n  public readonly resizing: ResizeController<T>;\n\n  public get columns(): ColumnConfiguration<T>[] {\n    return this._columns;\n  }\n\n  /** Returns the header row element of the grid. */\n  public get headerRow(): IgcGridLiteHeaderRow<T> | null {\n    return this.host.renderRoot.querySelector<IgcGridLiteHeaderRow<T>>(GRID_HEADER_ROW_TAG);\n  }\n\n  /** Returns the filter row element of the grid. */\n  public get filterRow(): IgcFilterRow<T> | null {\n    return this.host.renderRoot.querySelector<IgcFilterRow<T>>(GRID_FILTER_ROW_TAG);\n  }\n\n  /** Returns the data row elements of the grid. */\n  public get rows(): IgcGridLiteRow<T>[] {\n    return Array.from(this.host.renderRoot.querySelectorAll<IgcGridLiteRow<T>>(GRID_ROW_TAG));\n  }\n\n  /** Returns the virtualizer element of the grid. */\n  public get virtualizer(): IgcVirtualizer | null {\n    return this.host.renderRoot.querySelector(GRID_BODY);\n  }\n\n  /** The currently active node in the grid. */\n  public get active(): ActiveNode<T> {\n    return this.navigation.active;\n  }\n\n  /** Sets the currently active node in the grid. */\n  public set active(node: ActiveNode<T>) {\n    this.navigation.active = node;\n  }\n\n  constructor(host: GridHost<T>, observersCallback: () => void) {\n    this._observersCallback = observersCallback;\n    this.host = host;\n    this.host.addController(this);\n\n    this.sorting = new SortController(this.host);\n    this.filtering = new FilterController(this);\n    this.navigation = new NavigationController(this);\n    this.resizing = new ResizeController(this.host);\n  }\n\n  public hostUpdate(): void {\n    this.headerRow?.requestUpdate();\n    this.virtualizer?.requestUpdate();\n  }\n\n  public setColumnConfiguration(columns: ColumnConfiguration<T>[]): void {\n    this._columns = columns.map((column) => createColumnConfiguration(column));\n    this.filtering.resolveConditions();\n    this._observersCallback.call(this.host);\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public setAutoColumnConfiguration(): void {\n    if (this.host.autoGenerate && this.host.data.length > 0) {\n      this._columns = setColumnsFromData(this.host.data[0]);\n      this.filtering.resolveConditions();\n      this.host.requestUpdate(PIPELINE);\n    }\n  }\n\n  public updateColumnsConfiguration(config: ColumnConfiguration<T>[]): void {\n    for (const columnConfig of config) {\n      const existing = this._columns.findIndex((column) => column.field === columnConfig.field);\n      if (existing !== -1) {\n        this._columns[existing] = {\n          ...this._columns[existing],\n          ...createColumnConfiguration(columnConfig),\n        };\n      }\n    }\n\n    this._columns = [...this._columns];\n    this._observersCallback.call(this.host);\n    this.host.requestUpdate(PIPELINE);\n  }\n}\n\nfunction createStateController<T extends object>(\n  host: GridHost<T>,\n  observersCallback: () => void\n): StateController<T> {\n  return new StateController<T>(host, observersCallback);\n}\n\nexport type { StateController };\nexport { createStateController };\n"]}
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/controllers/state.ts"],"names":[],"mappings":"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","sourcesContent":["import { PIPELINE } from '../internal/constants.js';\nimport type { ActiveNode, ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\nimport { createColumnConfiguration, setColumnsFromData } from '../internal/utils.js';\nimport type { GridDOMController } from './dom.js';\nimport { FilterController } from './filter.js';\nimport { NavigationController } from './navigation.js';\nimport { ResizeController } from './resize.js';\nimport { SortController } from './sort.js';\n\n/**\n * Holds the column configuration of the grid and owns the controllers for its\n * data operations. Column objects are immutable: each change produces new objects\n * and a new array, so consumers can dirty-check by identity.\n *\n * @remarks\n * Not a reactive controller: it has no host lifecycle. All DOM concerns live in\n * {@link GridDOMController}.\n */\nclass StateController<T extends object> {\n  private _columns: ColumnConfiguration<T>[] = [];\n  private readonly _observersCallback: () => void;\n\n  /** The grid host element. */\n  public readonly host: GridHost<T>;\n\n  public readonly sorting: SortController<T>;\n  public readonly filtering: FilterController<T>;\n  public readonly navigation: NavigationController<T>;\n  public readonly resizing: ResizeController<T>;\n\n  public get columns(): ColumnConfiguration<T>[] {\n    return this._columns;\n  }\n\n  /** The currently active node in the grid. */\n  public get active(): ActiveNode<T> {\n    return this.navigation.active;\n  }\n\n  /** Sets the currently active node in the grid. */\n  public set active(node: ActiveNode<T>) {\n    this.navigation.active = node;\n  }\n\n  constructor(host: GridHost<T>, dom: GridDOMController<T>, observersCallback: () => void) {\n    this._observersCallback = observersCallback;\n    this.host = host;\n\n    this.sorting = new SortController(this);\n    this.filtering = new FilterController(this, dom);\n    this.navigation = new NavigationController(this, dom);\n    this.resizing = new ResizeController(this, dom);\n  }\n\n  /**\n   * Notifies the state context consumers (headers, header row, filter row) that\n   * their render inputs changed. Called at the mutation points only, never on\n   * each host update.\n   */\n  public updateObservers(): void {\n    this._observersCallback.call(this.host);\n  }\n\n  public setColumnConfiguration(columns: ColumnConfiguration<T>[]): void {\n    this._columns = columns.map((column) => createColumnConfiguration(column));\n    this.filtering.resolveConditions();\n    this.updateObservers();\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public setAutoColumnConfiguration(): void {\n    if (this.host.autoGenerate && this.host.data.length > 0) {\n      this._columns = setColumnsFromData(this.host.data[0]);\n      this.filtering.resolveConditions();\n      this.host.requestUpdate(PIPELINE);\n    }\n  }\n\n  public updateColumnsConfiguration(config: ColumnConfiguration<T>[]): void {\n    // NOTE: The in-place writes are load-bearing. Consumers holding the current\n    // array (header row, DOM controller) must see the new column objects in this\n    // update cycle; rebuilding the array delivers them one cycle late.\n    for (const columnConfig of config) {\n      const existing = this._columns.findIndex((column) => column.field === columnConfig.field);\n      if (existing !== -1) {\n        this._columns[existing] = {\n          ...this._columns[existing],\n          ...createColumnConfiguration(columnConfig),\n        };\n      }\n    }\n\n    this._columns = [...this._columns];\n    this.updateObservers();\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  /**\n   * Replaces the width of a single column with a new configuration object.\n   *\n   * @remarks\n   * Width has no effect on the data pipeline, so no pipeline run is scheduled.\n   * Resize drags call this on each pointer move.\n   */\n  public setColumnWidth(field: Keys<T>, width: string): void {\n    const index = this._columns.findIndex((column) => column.field === field);\n\n    if (index === -1) {\n      return;\n    }\n\n    this._columns = this._columns.with(index, { ...this._columns[index], width });\n    this.updateObservers();\n    this.host.requestUpdate();\n  }\n}\n\nfunction createStateController<T extends object>(\n  host: GridHost<T>,\n  dom: GridDOMController<T>,\n  observersCallback: () => void\n): StateController<T> {\n  return new StateController<T>(host, dom, observersCallback);\n}\n\nexport type { StateController };\nexport { createStateController };\n"]}