apex-grid 3.2.0 → 3.4.0

package/components/filter-row.js

@@ -7,44 +7,93 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { getFilterOperandsFor } 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.triggerRect = null;
         this.dropdownOpen = false;
         this.column = DEFAULT_COLUMN_CONFIG;
         this.#handleDropdownItemClick = (event) => {
             event.stopPropagation();
-            const target = event.target.closest('[data-value]');
-            if (!target)
+            this.#selectOption(event.target.closest('[data-value]'));
+        };
+        this.#handleTriggerKeydown = (event) => {
+            if (event.key !== 'ArrowDown' && event.key !== 'Down')
                 return;
-            const value = target.dataset.value;
-            this.#applyCondition(value);
-            this.dropdownOpen = false;
-            this.input?.focus();
+            event.preventDefault();
+            event.stopPropagation();
+            this.dropdownOpen = true;
+            this.#focusDropdownOption();
+        };
+        this.#handleDropdownKeydown = (event) => {
+            const options = this.#dropdownOptions();
+            const current = options.findIndex((option) => option.matches(':focus'));
+            switch (event.key) {
+                case 'ArrowDown':
+                case 'Down':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[Math.min(current + 1, options.length - 1)]?.focus();
+                    return;
+                case 'ArrowUp':
+                case 'Up':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[Math.max(current - 1, 0)]?.focus();
+                    return;
+                case 'Home':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[0]?.focus();
+                    return;
+                case 'End':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[options.length - 1]?.focus();
+                    return;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.#selectOption(options[current] ?? null);
+                    return;
+                default:
+                    return;
+            }
         };
         this.#handleOutsidePointer = (event) => {
-            if (!this.dropdownOpen)
-                return;
             const path = event.composedPath();
-            if (path.includes(this.dropdown) || path.includes(this.conditionElement))
+            if (this.dropdownOpen) {
+                if (!path.includes(this.dropdown) && !path.includes(this.conditionElement)) {
+                    this.dropdownOpen = false;
+                }
                 return;
-            this.dropdownOpen = false;
+            }
+            if (this.active && !path.includes(this)) {
+                this.active = false;
+            }
         };
         this.#handleDocumentKey = (event) => {
-            if (this.dropdownOpen && event.key === 'Escape') {
+            if (event.key !== 'Escape')
+                return;
+            if (this.dropdownOpen) {
                 event.stopPropagation();
                 this.dropdownOpen = false;
                 this.conditionElement?.focus();
+                return;
+            }
+            if (this.active) {
+                event.stopPropagation();
+                this.active = false;
             }
         };
         this.#openDropdownList = () => {
@@ -73,19 +122,33 @@ export default class ApexFilterRow extends LitElement {
     #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) {
+        if (this.input?.value || this.expression.condition.unary) {
             this.filterController.filterWithEvent(this.expression, 'modify');
         }
         this.requestUpdate();
     }
+    #selectOption(target) {
+        if (!target)
+            return;
+        const value = target.dataset.value;
+        this.#applyCondition(value);
+        this.dropdownOpen = false;
+        this.input?.focus();
+    }
     #handleDropdownItemClick;
+    #dropdownOptions() {
+        return Array.from(this.dropdown?.querySelectorAll('[role="option"]') ?? []);
+    }
+    #focusDropdownOption() {
+        requestAnimationFrame(() => {
+            const options = this.#dropdownOptions();
+            (options.find((option) => option.matches('[aria-selected="true"]')) ?? options[0])?.focus();
+        });
+    }
+    #handleTriggerKeydown;
+    #handleDropdownKeydown;
     #handleOutsidePointer;
     #handleDocumentKey;
     #handleInput(event) {
@@ -109,7 +172,8 @@ export default class ApexFilterRow extends LitElement {
         event.stopPropagation();
         switch (event.key) {
             case 'Enter':
-                this.input.value = '';
+                if (this.input)
+                    this.input.value = '';
                 this.#setDefaultExpression();
                 return;
             case 'Escape':
@@ -121,13 +185,12 @@ export default class ApexFilterRow extends LitElement {
     }
     #handleResetClick() {
         this.filterController.removeAllExpressions(this.column.key);
+        this.#setDefaultExpression();
         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);
     }
@@ -136,9 +199,24 @@ export default class ApexFilterRow extends LitElement {
         document.removeEventListener('keydown', this.#handleDocumentKey, true);
         super.disconnectedCallback();
     }
-    activeChanged() {
-        this.style.display = this.active ? 'flex' : '';
-        if (!this.active) {
+    async activeChanged() {
+        if (this.active && this.triggerRect) {
+            const panelWidth = 240;
+            const viewportWidth = window.innerWidth;
+            let left = this.triggerRect.left;
+            if (left + panelWidth > viewportWidth - 8) {
+                left = Math.max(8, viewportWidth - panelWidth - 8);
+            }
+            this.style.setProperty('--fp-top', `${this.triggerRect.bottom + 4}px`);
+            this.style.setProperty('--fp-left', `${left}px`);
+            this.setAttribute('data-active', '');
+            await this.updateComplete;
+            this.input?.select();
+        }
+        else {
+            this.removeAttribute('data-active');
+            this.style.removeProperty('--fp-top');
+            this.style.removeProperty('--fp-left');
             this.column = DEFAULT_COLUMN_CONFIG;
         }
         this.state.host.requestUpdate();
@@ -166,7 +244,7 @@ export default class ApexFilterRow extends LitElement {
             if (this.active && this.expression === expression) {
                 this.#setDefaultExpression();
                 await this.updateComplete;
-                this.input.focus();
+                this.input?.focus();
             }
             this.requestUpdate();
         };
@@ -200,7 +278,7 @@ export default class ApexFilterRow extends LitElement {
       <button
         part="chip-remove"
         type="button"
-        aria-label="Remove filter"
+        aria-label=${this.state.localize('filter.removeFilter')}
         @click=${props.onRemove}
       >
         ${renderIcon('close')}
@@ -229,7 +307,7 @@ export default class ApexFilterRow extends LitElement {
         part="action"
         @click=${this.#handleResetClick}
       >
-        ${renderIcon('refresh')} Reset
+        ${renderIcon('refresh')} ${this.state.localize('filter.reset')}
       </button>
       <button
         id="close"
@@ -239,7 +317,7 @@ export default class ApexFilterRow extends LitElement {
             this.active = false;
         }}
       >
-        ${renderIcon('close')} Close
+        ${renderIcon('close')} ${this.state.localize('filter.close')}
       </button>
     `;
     }
@@ -247,9 +325,10 @@ export default class ApexFilterRow extends LitElement {
         return html `<ul
       part="dropdown"
       role="listbox"
-      aria-label="Filter condition"
+      aria-label=${this.state.localize('filter.conditionList')}
       ?hidden=${!this.dropdownOpen}
       @click=${this.#handleDropdownItemClick}
+      @keydown=${this.#handleDropdownKeydown}
     >
       ${Object.entries(getFilterOperandsFor(this.column)).map(([key, operand]) => html `
           <li
@@ -260,109 +339,56 @@ export default class ApexFilterRow extends LitElement {
             aria-selected=${this.condition.name === key}
             ?selected=${this.condition.name === key}
           >
-            ${renderIcon(key)}<span>${operand?.label ?? key}</span>
+            ${renderIcon(key)}<span
+              >${this.state.localize(`filter.operator.${key}`, undefined, operand?.label ?? key)}</span
+            >
           </li>
         `)}
     </ul>`;
     }
     renderDropdownTarget() {
+        const conditionLabel = this.state.localize(`filter.operator.${this.condition.name}`, undefined, this.condition.label ?? this.condition.name);
         return html `<button
       id="condition"
       type="button"
       part="condition-trigger"
-      aria-label="Change filter condition"
+      aria-label=${this.state.localize('filter.changeCondition')}
       aria-haspopup="listbox"
       aria-expanded=${this.dropdownOpen ? 'true' : 'false'}
       @click=${this.#openDropdownList}
+      @keydown=${this.#handleTriggerKeydown}
     >
-      ${renderIcon(this.condition.name)}
+      <span>${conditionLabel}</span>
+      ${renderIcon('chevron-down')}
     </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>`;
-        })}`;
+        const hasChips = Boolean(this.filterController.get(this.column.key)?.length);
+        return html `
+      <div part="panel">
+        <div part="condition-row">
+          ${this.renderDropdownTarget()}
+          ${this.renderDropdown()}
+        </div>
+        ${!this.condition.unary
+            ? html `<div part="panel-input-row">
+              <input
+                part="filter-input"
+                type="text"
+                .value=${this.expression?.searchTerm ?? ''}
+                placeholder=${this.state.localize('filter.inputPlaceholder')}
+                @input=${this.#handleInput}
+                @keydown=${this.#handleKeydown}
+              />
+            </div>`
+            : nothing}
+        ${hasChips ? html `<div part="chips-row">${this.renderActiveChips()}</div>` : nothing}
+        <div part="panel-footer">${this.renderFilterActions()}</div>
+      </div>
+    `;
     }
     render() {
-        return html `${this.active ? this.renderActiveState() : this.renderInactiveState()}`;
+        return html `${this.active ? this.renderActiveState() : nothing}`;
     }
 }
 __decorate([
@@ -372,6 +398,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], ApexFilterRow.prototype, "active", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexFilterRow.prototype, "triggerRect", void 0);
 __decorate([
     query('input')
 ], ApexFilterRow.prototype, "input", void 0);

package/components/filter-row.js.map

@@ -1 +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"]}
+{"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 { gridStateContext, type StateController } from '../controllers/state.js';\nimport type { GridLocaleKey } from '../i18n/index.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 { getFilterOperandsFor } from '../internal/utils.js';\nimport { watch } from '../internal/watch.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  /** Bounding rect of the filter icon that opened this panel. Used for positioning. */\n  @property({ attribute: false })\n  public triggerRect: DOMRect | null = null;\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  #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  #selectOption(target: HTMLElement | null) {\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  #handleDropdownItemClick = (event: Event) => {\n    event.stopPropagation();\n    this.#selectOption((event.target as HTMLElement).closest<HTMLElement>('[data-value]'));\n  };\n\n  #dropdownOptions(): HTMLElement[] {\n    return Array.from(this.dropdown?.querySelectorAll<HTMLElement>('[role=\"option\"]') ?? []);\n  }\n\n  /** Moves focus into the dropdown, landing on the selected (or first) option. */\n  #focusDropdownOption() {\n    requestAnimationFrame(() => {\n      const options = this.#dropdownOptions();\n      (options.find((option) => option.matches('[aria-selected=\"true\"]')) ?? options[0])?.focus();\n    });\n  }\n\n  /** ArrowDown on the condition trigger opens the listbox and focuses into it. */\n  #handleTriggerKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'ArrowDown' && event.key !== 'Down') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.dropdownOpen = true;\n    this.#focusDropdownOption();\n  };\n\n  /** Listbox keyboard pattern: arrows/Home/End rove, Enter/Space pick. */\n  #handleDropdownKeydown = (event: KeyboardEvent) => {\n    const options = this.#dropdownOptions();\n    const current = options.findIndex((option) => option.matches(':focus'));\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Down':\n        event.preventDefault();\n        event.stopPropagation();\n        options[Math.min(current + 1, options.length - 1)]?.focus();\n        return;\n      case 'ArrowUp':\n      case 'Up':\n        event.preventDefault();\n        event.stopPropagation();\n        options[Math.max(current - 1, 0)]?.focus();\n        return;\n      case 'Home':\n        event.preventDefault();\n        event.stopPropagation();\n        options[0]?.focus();\n        return;\n      case 'End':\n        event.preventDefault();\n        event.stopPropagation();\n        options[options.length - 1]?.focus();\n        return;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        event.stopPropagation();\n        this.#selectOption(options[current] ?? null);\n        return;\n      default:\n        return;\n    }\n  };\n\n  #handleOutsidePointer = (event: PointerEvent) => {\n    const path = event.composedPath();\n\n    // Close the condition dropdown if clicking outside it.\n    if (this.dropdownOpen) {\n      if (!path.includes(this.dropdown) && !path.includes(this.conditionElement)) {\n        this.dropdownOpen = false;\n      }\n      return;\n    }\n\n    // Close the whole panel if clicking outside it.\n    if (this.active && !path.includes(this)) {\n      this.active = false;\n    }\n  };\n\n  #handleDocumentKey = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') return;\n\n    if (this.dropdownOpen) {\n      event.stopPropagation();\n      this.dropdownOpen = false;\n      this.conditionElement?.focus();\n      return;\n    }\n\n    if (this.active) {\n      event.stopPropagation();\n      this.active = false;\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      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        if (this.input) 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.#setDefaultExpression();\n    this.requestUpdate();\n  }\n\n  #openDropdownList = () => {\n    this.dropdownOpen = !this.dropdownOpen;\n  };\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\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 async activeChanged() {\n    if (this.active && this.triggerRect) {\n      const panelWidth = 240;\n      const viewportWidth = window.innerWidth;\n      let left = this.triggerRect.left;\n      // Clamp so the panel doesn't overflow the right edge of the viewport.\n      if (left + panelWidth > viewportWidth - 8) {\n        left = Math.max(8, viewportWidth - panelWidth - 8);\n      }\n      this.style.setProperty('--fp-top', `${this.triggerRect.bottom + 4}px`);\n      this.style.setProperty('--fp-left', `${left}px`);\n      this.setAttribute('data-active', '');\n      await this.updateComplete;\n      this.input?.select();\n    } else {\n      this.removeAttribute('data-active');\n      this.style.removeProperty('--fp-top');\n      this.style.removeProperty('--fp-left');\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      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=${this.state.localize('filter.removeFilter')}\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')} ${this.state.localize('filter.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')} ${this.state.localize('filter.close')}\n      </button>\n    `;\n  }\n\n  protected renderDropdown() {\n    return html`<ul\n      part=\"dropdown\"\n      role=\"listbox\"\n      aria-label=${this.state.localize('filter.conditionList')}\n      ?hidden=${!this.dropdownOpen}\n      @click=${this.#handleDropdownItemClick}\n      @keydown=${this.#handleDropdownKeydown}\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\n              >${this.state.localize(\n                `filter.operator.${key}` as GridLocaleKey,\n                undefined,\n                operand?.label ?? key\n              )}</span\n            >\n          </li>\n        `\n      )}\n    </ul>`;\n  }\n\n  protected renderDropdownTarget() {\n    const conditionLabel = this.state.localize(\n      `filter.operator.${this.condition.name}` as GridLocaleKey,\n      undefined,\n      (this.condition as FilterOperation<T>).label ?? this.condition.name\n    );\n    return html`<button\n      id=\"condition\"\n      type=\"button\"\n      part=\"condition-trigger\"\n      aria-label=${this.state.localize('filter.changeCondition')}\n      aria-haspopup=\"listbox\"\n      aria-expanded=${this.dropdownOpen ? 'true' : 'false'}\n      @click=${this.#openDropdownList}\n      @keydown=${this.#handleTriggerKeydown}\n    >\n      <span>${conditionLabel}</span>\n      ${renderIcon('chevron-down')}\n    </button>`;\n  }\n\n  protected renderActiveState() {\n    const hasChips = Boolean(this.filterController.get(this.column.key)?.length);\n    return html`\n      <div part=\"panel\">\n        <div part=\"condition-row\">\n          ${this.renderDropdownTarget()}\n          ${this.renderDropdown()}\n        </div>\n        ${\n          !this.condition.unary\n            ? html`<div part=\"panel-input-row\">\n              <input\n                part=\"filter-input\"\n                type=\"text\"\n                .value=${(this.expression?.searchTerm as string) ?? ''}\n                placeholder=${this.state.localize('filter.inputPlaceholder')}\n                @input=${this.#handleInput}\n                @keydown=${this.#handleKeydown}\n              />\n            </div>`\n            : nothing\n        }\n        ${hasChips ? html`<div part=\"chips-row\">${this.renderActiveChips()}</div>` : nothing}\n        <div part=\"panel-footer\">${this.renderFilterActions()}</div>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html`${this.active ? this.renderActiveState() : nothing}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexFilterRow.tagName]: ApexFilterRow<object>;\n  }\n}\n"]}