apex-grid 1.0.1 → 2.0.0

package/components/filter-row.js

@@ -0,0 +1,396 @@
+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 { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { gridStateContext } from '../controllers/state.js';
+import { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';
+import { renderIcon } from '../internal/icons.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_FILTER_ROW_TAG } from '../internal/tags.js';
+import { getDisplayColumns, getFilterOperandsFor, getPinEdge } from '../internal/utils.js';
+import { watch } from '../internal/watch.js';
+import { styles } from '../styles/filter-row/filter-row.css.js';
+export default class ApexFilterRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.dropdownOpen = false;
+        this.column = DEFAULT_COLUMN_CONFIG;
+        this.#handleDropdownItemClick = (event) => {
+            event.stopPropagation();
+            const target = event.target.closest('[data-value]');
+            if (!target)
+                return;
+            const value = target.dataset.value;
+            this.#applyCondition(value);
+            this.dropdownOpen = false;
+            this.input?.focus();
+        };
+        this.#handleOutsidePointer = (event) => {
+            if (!this.dropdownOpen)
+                return;
+            const path = event.composedPath();
+            if (path.includes(this.dropdown) || path.includes(this.conditionElement))
+                return;
+            this.dropdownOpen = false;
+        };
+        this.#handleDocumentKey = (event) => {
+            if (this.dropdownOpen && event.key === 'Escape') {
+                event.stopPropagation();
+                this.dropdownOpen = false;
+                this.conditionElement?.focus();
+            }
+        };
+        this.#openDropdownList = () => {
+            this.dropdownOpen = !this.dropdownOpen;
+        };
+    }
+    static get tagName() {
+        return GRID_FILTER_ROW_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(ApexFilterRow);
+    }
+    get isNumeric() {
+        return this.column.type === 'number';
+    }
+    get filterController() {
+        return this.state.filtering;
+    }
+    get condition() {
+        return this.expression.condition;
+    }
+    #setDefaultExpression() {
+        this.expression = this.filterController.getDefaultExpression(this.column);
+    }
+    #removeExpression(expression) {
+        this.filterController.removeExpression(expression);
+    }
+    async #show() {
+        this.active = true;
+        await this.updateComplete;
+        this.input?.select();
+    }
+    #applyCondition(key) {
+        this.expression.condition = getFilterOperandsFor(this.column)[key];
+        if (this.input.value || this.expression.condition.unary) {
+            this.filterController.filterWithEvent(this.expression, 'modify');
+        }
+        this.requestUpdate();
+    }
+    #handleDropdownItemClick;
+    #handleOutsidePointer;
+    #handleDocumentKey;
+    #handleInput(event) {
+        event.stopPropagation();
+        const raw = event.target.value ?? '';
+        const value = this.isNumeric ? Number.parseFloat(raw) : raw;
+        const shouldUpdate = this.isNumeric ? !Number.isNaN(value) : !!value;
+        const type = this.filterController.get(this.expression.key)?.has(this.expression)
+            ? 'modify'
+            : 'add';
+        if (shouldUpdate) {
+            this.expression.searchTerm = value;
+            this.filterController.filterWithEvent(this.expression, type);
+        }
+        else {
+            this.#removeExpression(this.expression);
+        }
+        this.requestUpdate();
+    }
+    #handleKeydown(event) {
+        event.stopPropagation();
+        switch (event.key) {
+            case 'Enter':
+                this.input.value = '';
+                this.#setDefaultExpression();
+                return;
+            case 'Escape':
+                this.active = false;
+                return;
+            default:
+                return;
+        }
+    }
+    #handleResetClick() {
+        this.filterController.removeAllExpressions(this.column.key);
+        this.requestUpdate();
+    }
+    #openDropdownList;
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'row');
+        this.setAttribute('aria-rowindex', '2');
+        document.addEventListener('pointerdown', this.#handleOutsidePointer, true);
+        document.addEventListener('keydown', this.#handleDocumentKey, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this.#handleOutsidePointer, true);
+        document.removeEventListener('keydown', this.#handleDocumentKey, true);
+        super.disconnectedCallback();
+    }
+    activeChanged() {
+        this.style.display = this.active ? 'flex' : '';
+        if (!this.active) {
+            this.column = DEFAULT_COLUMN_CONFIG;
+        }
+        this.state.host.requestUpdate();
+    }
+    #chipCriteriaFor(expression) {
+        return async (e) => {
+            e.stopPropagation();
+            expression.criteria = expression.criteria === 'and' ? 'or' : 'and';
+            this.filterController.filterWithEvent(expression, 'modify');
+            this.requestUpdate();
+        };
+    }
+    #chipSelectFor(expression) {
+        return async (e) => {
+            e.stopPropagation();
+            this.expression = expression;
+            await this.updateComplete;
+            this.input?.select();
+        };
+    }
+    #chipRemoveFor(expression) {
+        return async (e) => {
+            e.stopPropagation();
+            this.#removeExpression(expression);
+            if (this.active && this.expression === expression) {
+                this.#setDefaultExpression();
+                await this.updateComplete;
+                this.input.focus();
+            }
+            this.requestUpdate();
+        };
+    }
+    renderCriteriaButton(expr, index) {
+        return index
+            ? html `<button
+          type="button"
+          part="criteria"
+          @click=${this.#chipCriteriaFor(expr)}
+        >
+          ${expr.criteria}
+        </button>`
+            : nothing;
+    }
+    renderExpressionChip(props) {
+        const { name, unary } = props.expression.condition;
+        const { searchTerm: term } = props.expression;
+        return html `<div
+      part="expression-chip"
+      ?selected=${props.selected}
+    >
+      <button
+        part="chip-body"
+        type="button"
+        @click=${props.onSelect}
+      >
+        ${renderIcon(name)}
+        <span>${unary ? name : term}</span>
+      </button>
+      <button
+        part="chip-remove"
+        type="button"
+        aria-label="Remove filter"
+        @click=${props.onRemove}
+      >
+        ${renderIcon('close')}
+      </button>
+    </div>`;
+    }
+    renderActiveChips() {
+        const state = this.filterController.get(this.column.key);
+        return !state
+            ? nothing
+            : Array.from(state).map((expression, idx) => {
+                const props = {
+                    expression,
+                    selected: this.expression === expression,
+                    onRemove: this.#chipRemoveFor(expression),
+                    onSelect: this.#chipSelectFor(expression),
+                };
+                return html `${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(props)}`;
+            });
+    }
+    renderFilterActions() {
+        return html `
+      <button
+        id="reset"
+        type="button"
+        part="action"
+        @click=${this.#handleResetClick}
+      >
+        ${renderIcon('refresh')} Reset
+      </button>
+      <button
+        id="close"
+        type="button"
+        part="action"
+        @click=${() => {
+            this.active = false;
+        }}
+      >
+        ${renderIcon('close')} Close
+      </button>
+    `;
+    }
+    renderDropdown() {
+        return html `<ul
+      part="dropdown"
+      role="listbox"
+      aria-label="Filter condition"
+      ?hidden=${!this.dropdownOpen}
+      @click=${this.#handleDropdownItemClick}
+    >
+      ${Object.entries(getFilterOperandsFor(this.column)).map(([key, operand]) => html `
+          <li
+            part="dropdown-item"
+            role="option"
+            tabindex="-1"
+            data-value=${key}
+            aria-selected=${this.condition.name === key}
+            ?selected=${this.condition.name === key}
+          >
+            ${renderIcon(key)}<span>${operand?.label ?? key}</span>
+          </li>
+        `)}
+    </ul>`;
+    }
+    renderDropdownTarget() {
+        return html `<button
+      id="condition"
+      type="button"
+      part="condition-trigger"
+      aria-label="Change filter condition"
+      aria-haspopup="listbox"
+      aria-expanded=${this.dropdownOpen ? 'true' : 'false'}
+      @click=${this.#openDropdownList}
+    >
+      ${renderIcon(this.condition.name)}
+    </button>`;
+    }
+    renderInputArea() {
+        return html `<div part="filter-field">
+      ${this.renderDropdownTarget()}
+      <input
+        part="filter-input"
+        type="text"
+        .value=${ifDefined(this.expression.searchTerm)}
+        placeholder="Add filter value"
+        ?readonly=${this.condition.unary}
+        @input=${this.#handleInput}
+        @keydown=${this.#handleKeydown}
+      />
+      ${this.renderDropdown()}
+    </div>`;
+    }
+    renderActiveState() {
+        return html `<div part="active-state">
+      <div part="filter-row-input">${this.renderInputArea()}</div>
+      <div part="filter-row-filters">${this.renderActiveChips()}</div>
+      <div part="filter-row-actions">${this.renderFilterActions()}</div>
+    </div> `;
+    }
+    renderInactiveChips(column, state) {
+        return Array.from(state).map((expression, idx) => {
+            const props = {
+                expression,
+                selected: false,
+                onRemove: this.#chipRemoveFor(expression),
+                onSelect: async (e) => {
+                    e.stopPropagation();
+                    this.column = column;
+                    this.expression = expression;
+                    this.#show();
+                },
+            };
+            return html `${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(props)}`;
+        });
+    }
+    renderFilterState(column) {
+        const state = this.filterController.get(column.key);
+        const partial = state && state.length < 3;
+        const hidden = state && state.length >= 3;
+        const open = () => {
+            this.column = column;
+            this.#setDefaultExpression();
+            this.#show();
+        };
+        const count = hidden ? html `<span part="filter-chip-count">${state.length}</span>` : nothing;
+        const chip = html `<button
+      part="filter-chip"
+      type="button"
+      data-column=${column.key}
+      @click=${open}
+    >
+      ${renderIcon('filter')}<span>Filter</span>${count}
+    </button>`;
+        return partial ? this.renderInactiveChips(column, state) : chip;
+    }
+    renderInactiveState() {
+        const pinOffsets = this.state.pinOffsets;
+        const displayColumns = getDisplayColumns(this.state.host.columns);
+        const selectionPlaceholder = this.state.selection.showCheckboxColumn
+            ? html `<div part="filter-row-preview" data-pinned="start"></div>`
+            : nothing;
+        const expansionPlaceholder = this.state.expansion.showToggleColumn
+            ? html `<div part="filter-row-preview" data-pinned="start"></div>`
+            : nothing;
+        return html `${selectionPlaceholder}${expansionPlaceholder}${displayColumns.map((column, index) => {
+            if (column.hidden)
+                return nothing;
+            const offset = pinOffsets.get(column.key);
+            const pinStyle = column.pinned && typeof offset === 'number' ? `--apex-pin-offset:${offset}px` : '';
+            const edge = getPinEdge(displayColumns, index);
+            return html `<div
+          part="filter-row-preview"
+          data-pinned=${column.pinned ?? 'none'}
+          data-pin-edge=${edge ?? 'none'}
+          style=${pinStyle}
+        >
+          ${column.filter ? this.renderFilterState(column) : nothing}
+        </div>`;
+        })}`;
+    }
+    render() {
+        return html `${this.active ? this.renderActiveState() : this.renderInactiveState()}`;
+    }
+}
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexFilterRow.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexFilterRow.prototype, "active", void 0);
+__decorate([
+    query('input')
+], ApexFilterRow.prototype, "input", void 0);
+__decorate([
+    query('#condition')
+], ApexFilterRow.prototype, "conditionElement", void 0);
+__decorate([
+    query('[part~="dropdown"]')
+], ApexFilterRow.prototype, "dropdown", void 0);
+__decorate([
+    state()
+], ApexFilterRow.prototype, "dropdownOpen", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexFilterRow.prototype, "column", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexFilterRow.prototype, "expression", void 0);
+__decorate([
+    watch('active', { waitUntilFirstUpdate: true })
+], ApexFilterRow.prototype, "activeChanged", null);
+//# sourceMappingURL=filter-row.js.map

package/components/filter-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-row.js","sourceRoot":"","sources":["../../src/components/filter-row.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_FILTER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { getDisplayColumns, getFilterOperandsFor, getPinEdge } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpressionTree } from '../operations/filter/tree.js';\nimport type { FilterExpression, FilterOperation, OperandKeys } from '../operations/filter/types.js';\nimport { styles } from '../styles/filter-row/filter-row.css.js';\n\ntype ExpressionChipProps<T> = {\n  expression: FilterExpression<T>;\n  selected: boolean;\n  onRemove: (e: Event) => Promise<void>;\n  onSelect: (e: Event) => Promise<void>;\n};\n\nexport default class ApexFilterRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_FILTER_ROW_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(ApexFilterRow);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  protected get isNumeric() {\n    return this.column.type === 'number';\n  }\n\n  protected get filterController() {\n    return this.state.filtering;\n  }\n\n  protected get condition() {\n    return this.expression.condition as FilterOperation<T>;\n  }\n\n  @property({ attribute: false })\n  public active = false;\n\n  @query('input')\n  public input!: HTMLInputElement;\n\n  @query('#condition')\n  public conditionElement!: HTMLElement;\n\n  @query('[part~=\"dropdown\"]')\n  public dropdown!: HTMLElement;\n\n  @state()\n  protected dropdownOpen = false;\n\n  @property({ attribute: false })\n  public column: ColumnConfiguration<T> = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public expression!: FilterExpression<T>;\n\n  #setDefaultExpression() {\n    this.expression = this.filterController.getDefaultExpression(this.column);\n  }\n\n  #removeExpression(expression: FilterExpression<T>) {\n    this.filterController.removeExpression(expression);\n  }\n\n  async #show() {\n    this.active = true;\n\n    await this.updateComplete;\n    this.input?.select();\n  }\n\n  #applyCondition(key: OperandKeys<T[typeof this.column.key]>) {\n    // XXX: Types\n    this.expression.condition = (getFilterOperandsFor(this.column) as any)[key] as FilterOperation<\n      T[keyof T]\n    >;\n\n    if (this.input.value || this.expression.condition.unary) {\n      this.filterController.filterWithEvent(this.expression, 'modify');\n    }\n\n    this.requestUpdate();\n  }\n\n  #handleDropdownItemClick = (event: Event) => {\n    event.stopPropagation();\n    const target = (event.target as HTMLElement).closest<HTMLElement>('[data-value]');\n    if (!target) return;\n    const value = target.dataset.value as OperandKeys<T[typeof this.column.key]>;\n    this.#applyCondition(value);\n    this.dropdownOpen = false;\n    this.input?.focus();\n  };\n\n  #handleOutsidePointer = (event: PointerEvent) => {\n    if (!this.dropdownOpen) return;\n    const path = event.composedPath();\n    if (path.includes(this.dropdown) || path.includes(this.conditionElement)) return;\n    this.dropdownOpen = false;\n  };\n\n  #handleDocumentKey = (event: KeyboardEvent) => {\n    if (this.dropdownOpen && event.key === 'Escape') {\n      event.stopPropagation();\n      this.dropdownOpen = false;\n      this.conditionElement?.focus();\n    }\n  };\n\n  #handleInput(event: Event) {\n    event.stopPropagation();\n\n    const raw = (event.target as HTMLInputElement).value ?? '';\n    const value = this.isNumeric ? Number.parseFloat(raw) : raw;\n    const shouldUpdate = this.isNumeric ? !Number.isNaN(value as number) : !!value;\n    const type = this.filterController.get(this.expression.key)?.has(this.expression)\n      ? 'modify'\n      : 'add';\n\n    if (shouldUpdate) {\n      this.expression.searchTerm = value as any;\n\n      this.filterController.filterWithEvent(this.expression, type);\n    } else {\n      this.#removeExpression(this.expression);\n    }\n\n    this.requestUpdate();\n  }\n\n  #handleKeydown(event: KeyboardEvent) {\n    event.stopPropagation();\n\n    switch (event.key) {\n      case 'Enter':\n        this.input.value = '';\n        this.#setDefaultExpression();\n        return;\n      case 'Escape':\n        this.active = false;\n        return;\n      default:\n        return;\n    }\n  }\n\n  #handleResetClick() {\n    this.filterController.removeAllExpressions(this.column.key);\n    this.requestUpdate();\n  }\n\n  #openDropdownList = () => {\n    this.dropdownOpen = !this.dropdownOpen;\n  };\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n    this.setAttribute('aria-rowindex', '2');\n    document.addEventListener('pointerdown', this.#handleOutsidePointer, true);\n    document.addEventListener('keydown', this.#handleDocumentKey, true);\n  }\n\n  public override disconnectedCallback(): void {\n    document.removeEventListener('pointerdown', this.#handleOutsidePointer, true);\n    document.removeEventListener('keydown', this.#handleDocumentKey, true);\n    super.disconnectedCallback();\n  }\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected activeChanged() {\n    this.style.display = this.active ? 'flex' : '';\n\n    if (!this.active) {\n      this.column = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n    }\n\n    this.state.host.requestUpdate();\n  }\n\n  #chipCriteriaFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n\n      expression.criteria = expression.criteria === 'and' ? 'or' : 'and';\n      this.filterController.filterWithEvent(expression, 'modify');\n      this.requestUpdate();\n    };\n  }\n\n  #chipSelectFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.expression = expression;\n      await this.updateComplete;\n      this.input?.select();\n    };\n  }\n\n  #chipRemoveFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.#removeExpression(expression);\n\n      if (this.active && this.expression === expression) {\n        this.#setDefaultExpression();\n        await this.updateComplete;\n        this.input.focus();\n      }\n\n      this.requestUpdate();\n    };\n  }\n\n  protected renderCriteriaButton(expr: FilterExpression<T>, index: number) {\n    return index\n      ? html`<button\n          type=\"button\"\n          part=\"criteria\"\n          @click=${this.#chipCriteriaFor(expr)}\n        >\n          ${expr.criteria}\n        </button>`\n      : nothing;\n  }\n\n  protected renderExpressionChip(props: ExpressionChipProps<T>) {\n    const { name, unary } = props.expression.condition as FilterOperation<T>;\n    const { searchTerm: term } = props.expression;\n\n    return html`<div\n      part=\"expression-chip\"\n      ?selected=${props.selected}\n    >\n      <button\n        part=\"chip-body\"\n        type=\"button\"\n        @click=${props.onSelect}\n      >\n        ${renderIcon(name)}\n        <span>${unary ? name : term}</span>\n      </button>\n      <button\n        part=\"chip-remove\"\n        type=\"button\"\n        aria-label=\"Remove filter\"\n        @click=${props.onRemove}\n      >\n        ${renderIcon('close')}\n      </button>\n    </div>`;\n  }\n\n  protected renderActiveChips() {\n    const state = this.filterController.get(this.column.key);\n\n    return !state\n      ? nothing\n      : Array.from(state).map((expression, idx) => {\n          const props: ExpressionChipProps<T> = {\n            expression,\n            selected: this.expression === expression,\n            onRemove: this.#chipRemoveFor(expression),\n            onSelect: this.#chipSelectFor(expression),\n          };\n\n          return html`${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(\n            props\n          )}`;\n        });\n  }\n\n  protected renderFilterActions() {\n    return html`\n      <button\n        id=\"reset\"\n        type=\"button\"\n        part=\"action\"\n        @click=${this.#handleResetClick}\n      >\n        ${renderIcon('refresh')} Reset\n      </button>\n      <button\n        id=\"close\"\n        type=\"button\"\n        part=\"action\"\n        @click=${() => {\n          this.active = false;\n        }}\n      >\n        ${renderIcon('close')} Close\n      </button>\n    `;\n  }\n\n  protected renderDropdown() {\n    return html`<ul\n      part=\"dropdown\"\n      role=\"listbox\"\n      aria-label=\"Filter condition\"\n      ?hidden=${!this.dropdownOpen}\n      @click=${this.#handleDropdownItemClick}\n    >\n      ${Object.entries(getFilterOperandsFor(this.column)).map(\n        ([key, operand]) => html`\n          <li\n            part=\"dropdown-item\"\n            role=\"option\"\n            tabindex=\"-1\"\n            data-value=${key}\n            aria-selected=${this.condition.name === key}\n            ?selected=${this.condition.name === key}\n          >\n            ${renderIcon(key)}<span>${operand?.label ?? key}</span>\n          </li>\n        `\n      )}\n    </ul>`;\n  }\n\n  protected renderDropdownTarget() {\n    return html`<button\n      id=\"condition\"\n      type=\"button\"\n      part=\"condition-trigger\"\n      aria-label=\"Change filter condition\"\n      aria-haspopup=\"listbox\"\n      aria-expanded=${this.dropdownOpen ? 'true' : 'false'}\n      @click=${this.#openDropdownList}\n    >\n      ${renderIcon(this.condition.name)}\n    </button>`;\n  }\n\n  protected renderInputArea() {\n    return html`<div part=\"filter-field\">\n      ${this.renderDropdownTarget()}\n      <input\n        part=\"filter-input\"\n        type=\"text\"\n        .value=${ifDefined(this.expression.searchTerm as string | undefined) as string}\n        placeholder=\"Add filter value\"\n        ?readonly=${this.condition.unary}\n        @input=${this.#handleInput}\n        @keydown=${this.#handleKeydown}\n      />\n      ${this.renderDropdown()}\n    </div>`;\n  }\n\n  protected renderActiveState() {\n    return html`<div part=\"active-state\">\n      <div part=\"filter-row-input\">${this.renderInputArea()}</div>\n      <div part=\"filter-row-filters\">${this.renderActiveChips()}</div>\n      <div part=\"filter-row-actions\">${this.renderFilterActions()}</div>\n    </div> `;\n  }\n\n  protected renderInactiveChips(column: ColumnConfiguration<T>, state: FilterExpressionTree<T>) {\n    return Array.from(state).map((expression, idx) => {\n      const props: ExpressionChipProps<T> = {\n        expression,\n        selected: false,\n        onRemove: this.#chipRemoveFor(expression),\n        onSelect: async (e: Event) => {\n          e.stopPropagation();\n          this.column = column;\n          this.expression = expression;\n          this.#show();\n        },\n      };\n\n      return html`${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(props)}`;\n    });\n  }\n\n  protected renderFilterState(column: ColumnConfiguration<T>) {\n    const state = this.filterController.get(column.key);\n\n    const partial = state && state.length < 3;\n    const hidden = state && state.length >= 3;\n\n    const open = () => {\n      this.column = column;\n      this.#setDefaultExpression();\n      this.#show();\n    };\n\n    const count = hidden ? html`<span part=\"filter-chip-count\">${state.length}</span>` : nothing;\n    const chip = html`<button\n      part=\"filter-chip\"\n      type=\"button\"\n      data-column=${column.key}\n      @click=${open}\n    >\n      ${renderIcon('filter')}<span>Filter</span>${count}\n    </button>`;\n\n    return partial ? this.renderInactiveChips(column, state) : chip;\n  }\n\n  protected renderInactiveState() {\n    const pinOffsets = this.state.pinOffsets;\n    const displayColumns = getDisplayColumns(this.state.host.columns);\n    // Reserve a track to align with the row's selection checkbox column.\n    const selectionPlaceholder = this.state.selection.showCheckboxColumn\n      ? html`<div part=\"filter-row-preview\" data-pinned=\"start\"></div>`\n      : nothing;\n    // And another for the row's expansion chevron column.\n    const expansionPlaceholder = this.state.expansion.showToggleColumn\n      ? html`<div part=\"filter-row-preview\" data-pinned=\"start\"></div>`\n      : nothing;\n\n    return html`${selectionPlaceholder}${expansionPlaceholder}${displayColumns.map(\n      (column, index) => {\n        if (column.hidden) return nothing;\n        const offset = pinOffsets.get(column.key);\n        const pinStyle =\n          column.pinned && typeof offset === 'number' ? `--apex-pin-offset:${offset}px` : '';\n        const edge = getPinEdge(displayColumns, index);\n        return html`<div\n          part=\"filter-row-preview\"\n          data-pinned=${column.pinned ?? 'none'}\n          data-pin-edge=${edge ?? 'none'}\n          style=${pinStyle}\n        >\n          ${column.filter ? this.renderFilterState(column) : nothing}\n        </div>`;\n      }\n    )}`;\n  }\n\n  protected override render() {\n    return html`${this.active ? this.renderActiveState() : this.renderInactiveState()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexFilterRow.tagName]: ApexFilterRow<object>;\n  }\n}\n"]}