@memberjunction/ng-filter-builder 0.0.1 → 2.123.1

package/dist/lib/filter-rule/filter-rule.component.js

@@ -0,0 +1,682 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, HostListener } from '@angular/core';
+import { getOperatorsForType, operatorRequiresValue } from '../types/operators';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.name;
+const _forTrack1 = ($index, $item) => $item.value;
+function FilterRuleComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_6_For_2_Template_div_click_0_listener() { const field_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectField(field_r2.name)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r2 = ctx.$implicit;
+    const ɵ$index_15_r4 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", field_r2.name === ctx_r2.filter.field)("highlighted", ɵ$index_15_r4 === ctx_r2.fieldHighlightIndex);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", field_r2.displayName, " ");
+} }
+function FilterRuleComponent_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵtext(1, "No fields available");
+    i0.ɵɵelementEnd();
+} }
+function FilterRuleComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵrepeaterCreate(1, FilterRuleComponent_Conditional_6_For_2_Template, 2, 5, "div", 9, _forTrack0);
+    i0.ɵɵtemplate(3, FilterRuleComponent_Conditional_6_Conditional_3_Template, 2, 0, "div", 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.fields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.fields.length === 0 ? 3 : -1);
+} }
+function FilterRuleComponent_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_12_For_2_Template_div_click_0_listener() { const op_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectOperator(op_r6.value)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const op_r6 = ctx.$implicit;
+    const ɵ$index_35_r7 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", op_r6.value === ctx_r2.filter.operator)("highlighted", ɵ$index_35_r7 === ctx_r2.operatorHighlightIndex);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", op_r6.label, " ");
+} }
+function FilterRuleComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵrepeaterCreate(1, FilterRuleComponent_Conditional_12_For_2_Template, 2, 5, "div", 9, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.availableOperators);
+} }
+function FilterRuleComponent_Conditional_13_Conditional_0_Conditional_5_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_13_Conditional_0_Conditional_5_For_4_Template_div_click_0_listener() { const option_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.selectValue(option_r11.value)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r11 = ctx.$implicit;
+    const ɵ$index_56_r12 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", option_r11.value === ctx_r2.filter.value)("highlighted", ɵ$index_56_r12 + 1 === ctx_r2.valueHighlightIndex);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r11.label, " ");
+} }
+function FilterRuleComponent_Conditional_13_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 11);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_13_Conditional_0_Conditional_5_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectValue("")); });
+    i0.ɵɵtext(2, " Select... ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, FilterRuleComponent_Conditional_13_Conditional_0_Conditional_5_For_4_Template, 2, 5, "div", 9, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("selected", !ctx_r2.filter.value)("highlighted", 0 === ctx_r2.valueHighlightIndex);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.selectedField.valueList);
+} }
+function FilterRuleComponent_Conditional_13_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "button", 2);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_13_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleValueDropdown()); })("keydown", function FilterRuleComponent_Conditional_13_Conditional_0_Template_button_keydown_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onValueKeydown($event)); });
+    i0.ɵɵelementStart(2, "span", 3);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, FilterRuleComponent_Conditional_13_Conditional_0_Conditional_5_Template, 5, 4, "div", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("open", ctx_r2.valueDropdownOpen)("disabled", ctx_r2.disabled);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.disabled);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.getSelectedValueLabel());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.valueDropdownOpen ? 5 : -1);
+} }
+function FilterRuleComponent_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 19);
+    i0.ɵɵlistener("input", function FilterRuleComponent_Conditional_13_Conditional_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onValueChange($event.target.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.filter.value || "")("disabled", ctx_r2.disabled);
+} }
+function FilterRuleComponent_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 20);
+    i0.ɵɵlistener("input", function FilterRuleComponent_Conditional_13_Conditional_2_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onValueChange($event.target.valueAsNumber)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.filter.value)("disabled", ctx_r2.disabled);
+} }
+function FilterRuleComponent_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "button", 21);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_13_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onBooleanChange(true)); });
+    i0.ɵɵtext(2, " True ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 22);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_13_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onBooleanChange(false)); });
+    i0.ɵɵtext(4, " False ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r2.filter.value === true);
+    i0.ɵɵproperty("disabled", ctx_r2.disabled);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r2.filter.value === false);
+    i0.ɵɵproperty("disabled", ctx_r2.disabled);
+} }
+function FilterRuleComponent_Conditional_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 23);
+    i0.ɵɵlistener("change", function FilterRuleComponent_Conditional_13_Conditional_4_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDateChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.getDateInputValue())("disabled", ctx_r2.disabled);
+} }
+function FilterRuleComponent_Conditional_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 24);
+    i0.ɵɵlistener("input", function FilterRuleComponent_Conditional_13_Conditional_5_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onValueChange($event.target.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.filter.value || "")("disabled", ctx_r2.disabled);
+} }
+function FilterRuleComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, FilterRuleComponent_Conditional_13_Conditional_0_Template, 6, 7, "div", 12)(1, FilterRuleComponent_Conditional_13_Conditional_1_Template, 1, 2, "input", 13)(2, FilterRuleComponent_Conditional_13_Conditional_2_Template, 1, 2, "input", 14)(3, FilterRuleComponent_Conditional_13_Conditional_3_Template, 5, 6, "div", 15)(4, FilterRuleComponent_Conditional_13_Conditional_4_Template, 1, 2, "input", 16)(5, FilterRuleComponent_Conditional_13_Conditional_5_Template, 1, 2, "input", 17);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r2.selectedField.type === "string" && ctx_r2.hasValueList() ? 0 : ctx_r2.selectedField.type === "string" ? 1 : ctx_r2.selectedField.type === "number" ? 2 : ctx_r2.selectedField.type === "boolean" ? 3 : ctx_r2.selectedField.type === "date" ? 4 : ctx_r2.selectedField.type === "lookup" ? 5 : -1);
+} }
+function FilterRuleComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵlistener("click", function FilterRuleComponent_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDelete()); });
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r2.disabled);
+} }
+/**
+ * FilterRuleComponent - A single filter condition row
+ *
+ * Displays field selector, operator selector, and value editor
+ * based on the field type.
+ */
+export class FilterRuleComponent {
+    elementRef;
+    /**
+     * The filter descriptor for this rule
+     */
+    filter;
+    /**
+     * Available fields to filter on
+     */
+    fields = [];
+    /**
+     * Whether the component is disabled
+     */
+    disabled = false;
+    /**
+     * Whether to show the delete button
+     */
+    showDelete = true;
+    /**
+     * Emitted when the filter changes
+     */
+    filterChange = new EventEmitter();
+    /**
+     * Emitted when the delete button is clicked
+     */
+    delete = new EventEmitter();
+    /**
+     * Currently selected field info
+     */
+    selectedField = null;
+    /**
+     * Available operators for the selected field type
+     */
+    availableOperators = [];
+    /**
+     * Whether the current operator requires a value
+     */
+    requiresValue = true;
+    // Dropdown state
+    fieldDropdownOpen = false;
+    operatorDropdownOpen = false;
+    valueDropdownOpen = false;
+    // Keyboard navigation state
+    fieldHighlightIndex = -1;
+    operatorHighlightIndex = -1;
+    valueHighlightIndex = -1;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    /**
+     * Close dropdowns when clicking outside the component
+     */
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.closeAllDropdowns();
+        }
+    }
+    ngOnInit() {
+        this.updateFieldSelection();
+    }
+    ngOnChanges(changes) {
+        if (changes['filter'] || changes['fields']) {
+            this.updateFieldSelection();
+        }
+    }
+    /**
+     * Update the selected field and available operators
+     */
+    updateFieldSelection() {
+        if (!this.filter || !this.fields.length)
+            return;
+        this.selectedField = this.fields.find(f => f.name === this.filter.field) || null;
+        if (this.selectedField) {
+            this.availableOperators = getOperatorsForType(this.selectedField.type);
+            this.requiresValue = operatorRequiresValue(this.filter.operator);
+        }
+        else {
+            this.availableOperators = [];
+            this.requiresValue = true;
+        }
+    }
+    // ========================================
+    // DROPDOWN TOGGLE METHODS
+    // ========================================
+    toggleFieldDropdown() {
+        if (this.disabled)
+            return;
+        const wasOpen = this.fieldDropdownOpen;
+        this.closeAllDropdowns();
+        this.fieldDropdownOpen = !wasOpen;
+    }
+    toggleOperatorDropdown() {
+        if (this.disabled || !this.selectedField)
+            return;
+        const wasOpen = this.operatorDropdownOpen;
+        this.closeAllDropdowns();
+        this.operatorDropdownOpen = !wasOpen;
+    }
+    toggleValueDropdown() {
+        if (this.disabled)
+            return;
+        const wasOpen = this.valueDropdownOpen;
+        this.closeAllDropdowns();
+        this.valueDropdownOpen = !wasOpen;
+    }
+    closeFieldDropdown() {
+        this.fieldDropdownOpen = false;
+    }
+    closeOperatorDropdown() {
+        this.operatorDropdownOpen = false;
+    }
+    closeValueDropdown() {
+        this.valueDropdownOpen = false;
+    }
+    closeAllDropdowns() {
+        this.fieldDropdownOpen = false;
+        this.operatorDropdownOpen = false;
+        this.valueDropdownOpen = false;
+        this.resetHighlightIndices();
+    }
+    resetHighlightIndices() {
+        this.fieldHighlightIndex = -1;
+        this.operatorHighlightIndex = -1;
+        this.valueHighlightIndex = -1;
+    }
+    // ========================================
+    // KEYBOARD NAVIGATION
+    // ========================================
+    /**
+     * Handle keyboard events on the field dropdown trigger
+     */
+    onFieldKeydown(event) {
+        if (this.disabled)
+            return;
+        if (!this.fieldDropdownOpen) {
+            // Open dropdown on Enter, Space, or arrow keys
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.toggleFieldDropdown();
+                this.fieldHighlightIndex = this.fields.findIndex(f => f.name === this.filter.field);
+                if (this.fieldHighlightIndex < 0)
+                    this.fieldHighlightIndex = 0;
+            }
+            return;
+        }
+        this.handleDropdownKeydown(event, this.fields, this.fieldHighlightIndex, (index) => this.fieldHighlightIndex = index, (item) => this.selectField(item.name), (item) => item.displayName, () => this.closeFieldDropdown());
+    }
+    /**
+     * Handle keyboard events on the operator dropdown trigger
+     */
+    onOperatorKeydown(event) {
+        if (this.disabled || !this.selectedField)
+            return;
+        if (!this.operatorDropdownOpen) {
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.toggleOperatorDropdown();
+                this.operatorHighlightIndex = this.availableOperators.findIndex(o => o.value === this.filter.operator);
+                if (this.operatorHighlightIndex < 0)
+                    this.operatorHighlightIndex = 0;
+            }
+            return;
+        }
+        this.handleDropdownKeydown(event, this.availableOperators, this.operatorHighlightIndex, (index) => this.operatorHighlightIndex = index, (item) => this.selectOperator(item.value), (item) => item.label, () => this.closeOperatorDropdown());
+    }
+    /**
+     * Handle keyboard events on the value dropdown trigger
+     */
+    onValueKeydown(event) {
+        if (this.disabled || !this.selectedField?.valueList)
+            return;
+        if (!this.valueDropdownOpen) {
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.toggleValueDropdown();
+                const valueList = this.selectedField.valueList;
+                this.valueHighlightIndex = valueList.findIndex(v => v.value === this.filter.value);
+                if (this.valueHighlightIndex < 0)
+                    this.valueHighlightIndex = 0;
+            }
+            return;
+        }
+        this.handleDropdownKeydown(event, this.selectedField.valueList, this.valueHighlightIndex, (index) => this.valueHighlightIndex = index, (item) => this.selectValueFromOption(item.value), (item) => item.label, () => this.closeValueDropdown());
+    }
+    /**
+     * Generic handler for dropdown keyboard navigation
+     */
+    handleDropdownKeydown(event, items, currentIndex, setIndex, onSelect, getLabel, onClose) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setIndex(Math.min(currentIndex + 1, items.length - 1));
+                this.scrollHighlightedItemIntoView();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setIndex(Math.max(currentIndex - 1, 0));
+                this.scrollHighlightedItemIntoView();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (currentIndex >= 0 && currentIndex < items.length) {
+                    onSelect(items[currentIndex]);
+                }
+                break;
+            case 'Escape':
+            case 'Tab':
+                event.preventDefault();
+                onClose();
+                break;
+            case 'Home':
+                event.preventDefault();
+                setIndex(0);
+                this.scrollHighlightedItemIntoView();
+                break;
+            case 'End':
+                event.preventDefault();
+                setIndex(items.length - 1);
+                this.scrollHighlightedItemIntoView();
+                break;
+            default:
+                // Type-ahead: jump to first item starting with typed character
+                if (event.key.length === 1 && /[a-zA-Z0-9]/.test(event.key)) {
+                    const char = event.key.toLowerCase();
+                    const startIndex = currentIndex + 1;
+                    // Search from current position to end, then from start
+                    for (let i = 0; i < items.length; i++) {
+                        const idx = (startIndex + i) % items.length;
+                        const label = getLabel(items[idx]).toLowerCase();
+                        if (label.startsWith(char)) {
+                            setIndex(idx);
+                            this.scrollHighlightedItemIntoView();
+                            break;
+                        }
+                    }
+                }
+                break;
+        }
+    }
+    /**
+     * Scroll the highlighted dropdown item into view
+     */
+    scrollHighlightedItemIntoView() {
+        // Use setTimeout to let Angular update the DOM first
+        setTimeout(() => {
+            const highlightedEl = this.elementRef.nativeElement.querySelector('.dropdown-item.highlighted');
+            if (highlightedEl) {
+                highlightedEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }, 0);
+    }
+    // ========================================
+    // DISPLAY HELPERS
+    // ========================================
+    /**
+     * Get the display name for the currently selected field
+     */
+    getSelectedFieldDisplayName() {
+        if (!this.filter.field)
+            return 'Select field...';
+        const field = this.fields.find(f => f.name === this.filter.field);
+        return field?.displayName || this.filter.field;
+    }
+    /**
+     * Get the label for the currently selected operator
+     */
+    getSelectedOperatorLabel() {
+        if (!this.filter.operator)
+            return 'Select...';
+        const op = this.availableOperators.find(o => o.value === this.filter.operator);
+        return op?.label || this.filter.operator;
+    }
+    /**
+     * Get the label for the currently selected value (for value list dropdowns)
+     */
+    getSelectedValueLabel() {
+        if (!this.filter.value || !this.selectedField?.valueList)
+            return 'Select...';
+        const option = this.selectedField.valueList.find(o => o.value === this.filter.value);
+        return option?.label || String(this.filter.value);
+    }
+    // ========================================
+    // SELECTION HANDLERS
+    // ========================================
+    /**
+     * Handle field selection from custom dropdown
+     */
+    selectField(fieldName) {
+        this.closeFieldDropdown();
+        this.onFieldChange(fieldName);
+    }
+    /**
+     * Handle operator selection from custom dropdown
+     */
+    selectOperator(operator) {
+        this.closeOperatorDropdown();
+        this.onOperatorChange(operator);
+    }
+    /**
+     * Handle value selection from custom dropdown
+     */
+    selectValue(value) {
+        this.closeValueDropdown();
+        this.onValueChange(value);
+    }
+    /**
+     * Handle value selection from value list option (supports union type)
+     */
+    selectValueFromOption(value) {
+        this.closeValueDropdown();
+        this.onValueChange(value);
+    }
+    /**
+     * Handle field selection change
+     */
+    onFieldChange(fieldName) {
+        const field = this.fields.find(f => f.name === fieldName);
+        if (!field)
+            return;
+        this.selectedField = field;
+        this.availableOperators = getOperatorsForType(field.type);
+        // Get default operator for the new field type
+        const defaultOperator = this.availableOperators[0]?.value || 'eq';
+        this.requiresValue = operatorRequiresValue(defaultOperator);
+        // Emit updated filter with new field and reset value
+        this.emitChange({
+            field: fieldName,
+            operator: defaultOperator,
+            value: this.getDefaultValue(field.type)
+        });
+    }
+    /**
+     * Handle operator selection change
+     */
+    onOperatorChange(operator) {
+        this.requiresValue = operatorRequiresValue(operator);
+        // If operator doesn't require value, clear it
+        const value = this.requiresValue ? this.filter.value : null;
+        this.emitChange({
+            ...this.filter,
+            operator,
+            value
+        });
+    }
+    /**
+     * Handle value change
+     */
+    onValueChange(value) {
+        this.emitChange({
+            ...this.filter,
+            value
+        });
+    }
+    /**
+     * Handle boolean toggle
+     */
+    onBooleanChange(value) {
+        this.emitChange({
+            ...this.filter,
+            value
+        });
+    }
+    /**
+     * Handle date change
+     */
+    onDateChange(event) {
+        const input = event.target;
+        const value = input.value ? new Date(input.value).toISOString() : null;
+        this.emitChange({
+            ...this.filter,
+            value
+        });
+    }
+    /**
+     * Handle delete button click
+     */
+    onDelete() {
+        this.delete.emit();
+    }
+    /**
+     * Emit the filter change event
+     */
+    emitChange(filter) {
+        this.filterChange.emit(filter);
+    }
+    /**
+     * Get default value for a field type
+     */
+    getDefaultValue(type) {
+        switch (type) {
+            case 'string':
+                return '';
+            case 'number':
+                return null;
+            case 'boolean':
+                return true;
+            case 'date':
+                return null;
+            case 'lookup':
+                return null;
+            default:
+                return null;
+        }
+    }
+    /**
+     * Get the date value formatted for the date input
+     */
+    getDateInputValue() {
+        if (!this.filter.value)
+            return '';
+        try {
+            const date = new Date(this.filter.value);
+            return date.toISOString().split('T')[0];
+        }
+        catch {
+            return '';
+        }
+    }
+    /**
+     * Check if the current field has a value list (dropdown options)
+     */
+    hasValueList() {
+        return !!(this.selectedField?.valueList && this.selectedField.valueList.length > 0);
+    }
+    static ɵfac = function FilterRuleComponent_Factory(t) { return new (t || FilterRuleComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterRuleComponent, selectors: [["mj-filter-rule"]], hostBindings: function FilterRuleComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function FilterRuleComponent_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, false, i0.ɵɵresolveDocument);
+        } }, inputs: { filter: "filter", fields: "fields", disabled: "disabled", showDelete: "showDelete" }, outputs: { filterChange: "filterChange", delete: "delete" }, features: [i0.ɵɵNgOnChangesFeature], decls: 16, vars: 18, consts: [[1, "filter-rule"], [1, "custom-dropdown", "field-dropdown"], ["type", "button", 1, "dropdown-trigger", 3, "click", "keydown", "disabled"], [1, "dropdown-value"], [1, "fa-solid", "fa-chevron-down", "dropdown-arrow"], [1, "dropdown-menu"], [1, "custom-dropdown", "operator-dropdown"], [1, "rule-actions"], ["type", "button", "title", "Remove filter", 1, "action-btn", "delete", 3, "disabled"], [1, "dropdown-item", 3, "selected", "highlighted"], [1, "dropdown-empty"], [1, "dropdown-item", 3, "click"], [1, "custom-dropdown", "value-dropdown", 3, "open", "disabled"], ["type", "text", "placeholder", "Enter value...", 1, "value-input", 3, "value", "disabled"], ["type", "number", "placeholder", "Enter number...", 1, "value-input", 3, "value", "disabled"], [1, "value-toggle"], ["type", "date", 1, "value-input", "value-date", 3, "value", "disabled"], ["type", "text", "placeholder", "Enter ID...", 1, "value-input", 3, "value", "disabled"], [1, "custom-dropdown", "value-dropdown"], ["type", "text", "placeholder", "Enter value...", 1, "value-input", 3, "input", "value", "disabled"], ["type", "number", "placeholder", "Enter number...", 1, "value-input", 3, "input", "value", "disabled"], ["type", "button", 1, "toggle-btn", "true", 3, "click", "disabled"], ["type", "button", 1, "toggle-btn", "false", 3, "click", "disabled"], ["type", "date", 1, "value-input", "value-date", 3, "change", "value", "disabled"], ["type", "text", "placeholder", "Enter ID...", 1, "value-input", 3, "input", "value", "disabled"], ["type", "button", "title", "Remove filter", 1, "action-btn", "delete", 3, "click", "disabled"], [1, "fa-solid", "fa-times"]], template: function FilterRuleComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
+            i0.ɵɵlistener("click", function FilterRuleComponent_Template_button_click_2_listener() { return ctx.toggleFieldDropdown(); })("keydown", function FilterRuleComponent_Template_button_keydown_2_listener($event) { return ctx.onFieldKeydown($event); });
+            i0.ɵɵelementStart(3, "span", 3);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(5, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, FilterRuleComponent_Conditional_6_Template, 4, 1, "div", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "div", 6)(8, "button", 2);
+            i0.ɵɵlistener("click", function FilterRuleComponent_Template_button_click_8_listener() { return ctx.toggleOperatorDropdown(); })("keydown", function FilterRuleComponent_Template_button_keydown_8_listener($event) { return ctx.onOperatorKeydown($event); });
+            i0.ɵɵelementStart(9, "span", 3);
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(11, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(12, FilterRuleComponent_Conditional_12_Template, 3, 0, "div", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(13, FilterRuleComponent_Conditional_13_Template, 6, 1);
+            i0.ɵɵelementStart(14, "div", 7);
+            i0.ɵɵtemplate(15, FilterRuleComponent_Conditional_15_Template, 2, 1, "button", 8);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("disabled", ctx.disabled);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("open", ctx.fieldDropdownOpen)("disabled", ctx.disabled);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", ctx.disabled);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.getSelectedFieldDisplayName());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.fieldDropdownOpen ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("open", ctx.operatorDropdownOpen)("disabled", ctx.disabled || !ctx.selectedField);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", ctx.disabled || !ctx.selectedField);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.getSelectedOperatorLabel());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.operatorDropdownOpen ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.requiresValue && ctx.selectedField ? 13 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showDelete ? 15 : -1);
+        } }, styles: ["/* Scoped to mj-filter-rule to prevent style leakage with ViewEncapsulation.None */\nmj-filter-rule .filter-rule {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  background: linear-gradient(to bottom, #ffffff, #fafafa);\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\nmj-filter-rule .filter-rule:hover {\n  border-color: #d1d5db;\n  background: linear-gradient(to bottom, #ffffff, #f5f5f5);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\n}\n\nmj-filter-rule .filter-rule.disabled {\n  opacity: 0.6;\n  pointer-events: none;\n  box-shadow: none;\n}\n\n/* ========================================\n   CUSTOM DROPDOWN STYLES\n   ======================================== */\n\nmj-filter-rule .custom-dropdown {\n  position: relative;\n  min-width: 160px;\n}\n\nmj-filter-rule .custom-dropdown.field-dropdown {\n  min-width: 180px;\n}\n\nmj-filter-rule .custom-dropdown.operator-dropdown {\n  min-width: 160px;\n}\n\nmj-filter-rule .custom-dropdown.value-dropdown {\n  min-width: 160px;\n  flex: 1;\n}\n\nmj-filter-rule .custom-dropdown.disabled {\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n/* Dropdown Trigger Button */\nmj-filter-rule .dropdown-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 14px;\n  border: 1px solid #d4d4d8;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  background: white;\n  color: #374151;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  text-align: left;\n}\n\nmj-filter-rule .dropdown-trigger:hover:not(:disabled) {\n  border-color: #a1a1aa;\n  background: #fafafa;\n}\n\nmj-filter-rule .dropdown-trigger:focus {\n  outline: none;\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n  background: white;\n}\n\nmj-filter-rule .dropdown-trigger:disabled {\n  background-color: #f4f4f5;\n  color: #a1a1aa;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\nmj-filter-rule .custom-dropdown.open .dropdown-trigger {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n}\n\nmj-filter-rule .dropdown-value {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nmj-filter-rule .dropdown-arrow {\n  font-size: 10px;\n  color: #6b7280;\n  margin-left: 8px;\n  transition: transform 0.2s ease;\n}\n\nmj-filter-rule .custom-dropdown.open .dropdown-arrow {\n  transform: rotate(180deg);\n}\n\n/* Dropdown Menu */\nmj-filter-rule .dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  min-width: 100%;\n  max-height: 280px;\n  overflow-y: auto;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);\n  z-index: 9999;\n  animation: dropdownFadeIn 0.15s ease;\n}\n\n@keyframes dropdownFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Dropdown Items */\nmj-filter-rule .dropdown-item {\n  padding: 10px 14px;\n  font-size: 14px;\n  color: #374151;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border-bottom: 1px solid #f3f4f6;\n}\n\nmj-filter-rule .dropdown-item:last-child {\n  border-bottom: none;\n}\n\nmj-filter-rule .dropdown-item:hover,\nmj-filter-rule .dropdown-item.highlighted {\n  background: #f0f9ff;\n  color: #1d4ed8;\n}\n\nmj-filter-rule .dropdown-item.highlighted {\n  outline: 2px solid #3b82f6;\n  outline-offset: -2px;\n}\n\nmj-filter-rule .dropdown-item.selected {\n  background: #eff6ff;\n  color: #1d4ed8;\n  font-weight: 600;\n}\n\nmj-filter-rule .dropdown-item.selected::before {\n  content: '\\f00c';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n  font-size: 10px;\n  margin-right: 8px;\n  color: #3b82f6;\n}\n\nmj-filter-rule .dropdown-empty {\n  padding: 16px;\n  text-align: center;\n  color: #9ca3af;\n  font-size: 13px;\n  font-style: italic;\n}\n\n/* Scrollbar styling for dropdown */\nmj-filter-rule .dropdown-menu::-webkit-scrollbar {\n  width: 6px;\n}\n\nmj-filter-rule .dropdown-menu::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 3px;\n}\n\nmj-filter-rule .dropdown-menu::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 3px;\n}\n\nmj-filter-rule .dropdown-menu::-webkit-scrollbar-thumb:hover {\n  background: #a1a1a1;\n}\n\n/* ========================================\n   VALUE INPUT STYLES\n   ======================================== */\n\nmj-filter-rule .value-input {\n  padding: 10px 14px;\n  border: 1px solid #d4d4d8;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  background-color: white;\n  color: #374151;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  flex: 1;\n  min-width: 150px;\n}\n\nmj-filter-rule .value-input:hover:not(:disabled) {\n  border-color: #a1a1aa;\n  background-color: #fafafa;\n}\n\nmj-filter-rule .value-input:focus {\n  outline: none;\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n  background-color: white;\n}\n\nmj-filter-rule .value-input:disabled {\n  background-color: #f4f4f5;\n  color: #a1a1aa;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\nmj-filter-rule .value-input::placeholder {\n  color: #9ca3af;\n  font-weight: 400;\n}\n\nmj-filter-rule .value-date {\n  min-width: 160px;\n}\n\n/* ========================================\n   BOOLEAN TOGGLE STYLES\n   ======================================== */\n\nmj-filter-rule .value-toggle {\n  display: flex;\n  background: #f4f4f5;\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid #e5e7eb;\n}\n\nmj-filter-rule .toggle-btn {\n  padding: 8px 18px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #71717a;\n}\n\nmj-filter-rule .toggle-btn:hover:not(:disabled) {\n  color: #3f3f46;\n  background: rgba(255, 255, 255, 0.5);\n}\n\nmj-filter-rule .toggle-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\nmj-filter-rule .toggle-btn.active {\n  background: white;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  color: #18181b;\n}\n\nmj-filter-rule .toggle-btn.true.active {\n  color: #16a34a;\n}\n\nmj-filter-rule .toggle-btn.false.active {\n  color: #dc2626;\n}\n\n/* ========================================\n   RULE ACTIONS\n   ======================================== */\n\nmj-filter-rule .rule-actions {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\nmj-filter-rule .action-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  color: #a1a1aa;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\nmj-filter-rule .action-btn:hover:not(:disabled) {\n  background: #f4f4f5;\n  color: #71717a;\n}\n\nmj-filter-rule .action-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.3;\n}\n\nmj-filter-rule .action-btn.delete:hover:not(:disabled) {\n  background: #fef2f2;\n  color: #ef4444;\n}\n\n/* ========================================\n   RESPONSIVE\n   ======================================== */\n\n@media (max-width: 768px) {\n  mj-filter-rule .filter-rule {\n    flex-wrap: wrap;\n  }\n\n  mj-filter-rule .custom-dropdown,\n  mj-filter-rule .value-input {\n    min-width: 100%;\n    flex: 1 1 100%;\n  }\n\n  mj-filter-rule .custom-dropdown.field-dropdown,\n  mj-filter-rule .custom-dropdown.operator-dropdown,\n  mj-filter-rule .custom-dropdown.value-dropdown {\n    min-width: 100%;\n  }\n}\n"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterRuleComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-filter-rule', encapsulation: ViewEncapsulation.None, template: "<div class=\"filter-rule\" [class.disabled]=\"disabled\">\n  <!-- Field Selector - Custom Dropdown -->\n  <div class=\"custom-dropdown field-dropdown\" [class.open]=\"fieldDropdownOpen\" [class.disabled]=\"disabled\">\n    <button\n      type=\"button\"\n      class=\"dropdown-trigger\"\n      (click)=\"toggleFieldDropdown()\"\n      (keydown)=\"onFieldKeydown($event)\"\n      [disabled]=\"disabled\">\n      <span class=\"dropdown-value\">{{ getSelectedFieldDisplayName() }}</span>\n      <i class=\"fa-solid fa-chevron-down dropdown-arrow\"></i>\n    </button>\n    @if (fieldDropdownOpen) {\n      <div class=\"dropdown-menu\">\n        @for (field of fields; track field.name; let i = $index) {\n          <div\n            class=\"dropdown-item\"\n            [class.selected]=\"field.name === filter.field\"\n            [class.highlighted]=\"i === fieldHighlightIndex\"\n            (click)=\"selectField(field.name)\">\n            {{ field.displayName }}\n          </div>\n        }\n        @if (fields.length === 0) {\n          <div class=\"dropdown-empty\">No fields available</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Operator Selector - Custom Dropdown -->\n  <div class=\"custom-dropdown operator-dropdown\" [class.open]=\"operatorDropdownOpen\" [class.disabled]=\"disabled || !selectedField\">\n    <button\n      type=\"button\"\n      class=\"dropdown-trigger\"\n      (click)=\"toggleOperatorDropdown()\"\n      (keydown)=\"onOperatorKeydown($event)\"\n      [disabled]=\"disabled || !selectedField\">\n      <span class=\"dropdown-value\">{{ getSelectedOperatorLabel() }}</span>\n      <i class=\"fa-solid fa-chevron-down dropdown-arrow\"></i>\n    </button>\n    @if (operatorDropdownOpen) {\n      <div class=\"dropdown-menu\">\n        @for (op of availableOperators; track op.value; let i = $index) {\n          <div\n            class=\"dropdown-item\"\n            [class.selected]=\"op.value === filter.operator\"\n            [class.highlighted]=\"i === operatorHighlightIndex\"\n            (click)=\"selectOperator(op.value)\">\n            {{ op.label }}\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Value Editor - varies by field type -->\n  @if (requiresValue && selectedField) {\n    <!-- String with value list (custom dropdown) -->\n    @if (selectedField.type === 'string' && hasValueList()) {\n      <div class=\"custom-dropdown value-dropdown\" [class.open]=\"valueDropdownOpen\" [class.disabled]=\"disabled\">\n        <button\n          type=\"button\"\n          class=\"dropdown-trigger\"\n          (click)=\"toggleValueDropdown()\"\n          (keydown)=\"onValueKeydown($event)\"\n          [disabled]=\"disabled\">\n          <span class=\"dropdown-value\">{{ getSelectedValueLabel() }}</span>\n          <i class=\"fa-solid fa-chevron-down dropdown-arrow\"></i>\n        </button>\n        @if (valueDropdownOpen) {\n          <div class=\"dropdown-menu\">\n            <div\n              class=\"dropdown-item\"\n              [class.selected]=\"!filter.value\"\n              [class.highlighted]=\"0 === valueHighlightIndex\"\n              (click)=\"selectValue('')\">\n              Select...\n            </div>\n            @for (option of selectedField.valueList; track option.value; let i = $index) {\n              <div\n                class=\"dropdown-item\"\n                [class.selected]=\"option.value === filter.value\"\n                [class.highlighted]=\"(i + 1) === valueHighlightIndex\"\n                (click)=\"selectValue(option.value)\">\n                {{ option.label }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- String (text input) -->\n    @else if (selectedField.type === 'string') {\n      <input\n        type=\"text\"\n        class=\"value-input\"\n        [value]=\"filter.value || ''\"\n        (input)=\"onValueChange($any($event.target).value)\"\n        [disabled]=\"disabled\"\n        placeholder=\"Enter value...\">\n    }\n    <!-- Number -->\n    @else if (selectedField.type === 'number') {\n      <input\n        type=\"number\"\n        class=\"value-input\"\n        [value]=\"filter.value\"\n        (input)=\"onValueChange($any($event.target).valueAsNumber)\"\n        [disabled]=\"disabled\"\n        placeholder=\"Enter number...\">\n    }\n    <!-- Boolean -->\n    @else if (selectedField.type === 'boolean') {\n      <div class=\"value-toggle\">\n        <button\n          type=\"button\"\n          class=\"toggle-btn true\"\n          [class.active]=\"filter.value === true\"\n          (click)=\"onBooleanChange(true)\"\n          [disabled]=\"disabled\">\n          True\n        </button>\n        <button\n          type=\"button\"\n          class=\"toggle-btn false\"\n          [class.active]=\"filter.value === false\"\n          (click)=\"onBooleanChange(false)\"\n          [disabled]=\"disabled\">\n          False\n        </button>\n      </div>\n    }\n    <!-- Date -->\n    @else if (selectedField.type === 'date') {\n      <input\n        type=\"date\"\n        class=\"value-input value-date\"\n        [value]=\"getDateInputValue()\"\n        (change)=\"onDateChange($event)\"\n        [disabled]=\"disabled\">\n    }\n    <!-- Lookup (for now, simple text input - can be enhanced with record selector) -->\n    @else if (selectedField.type === 'lookup') {\n      <input\n        type=\"text\"\n        class=\"value-input\"\n        [value]=\"filter.value || ''\"\n        (input)=\"onValueChange($any($event.target).value)\"\n        [disabled]=\"disabled\"\n        placeholder=\"Enter ID...\">\n    }\n  }\n\n  <!-- Actions -->\n  <div class=\"rule-actions\">\n    @if (showDelete) {\n      <button\n        type=\"button\"\n        class=\"action-btn delete\"\n        (click)=\"onDelete()\"\n        [disabled]=\"disabled\"\n        title=\"Remove filter\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    }\n  </div>\n</div>\n", styles: ["/* Scoped to mj-filter-rule to prevent style leakage with ViewEncapsulation.None */\nmj-filter-rule .filter-rule {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  background: linear-gradient(to bottom, #ffffff, #fafafa);\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\nmj-filter-rule .filter-rule:hover {\n  border-color: #d1d5db;\n  background: linear-gradient(to bottom, #ffffff, #f5f5f5);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\n}\n\nmj-filter-rule .filter-rule.disabled {\n  opacity: 0.6;\n  pointer-events: none;\n  box-shadow: none;\n}\n\n/* ========================================\n   CUSTOM DROPDOWN STYLES\n   ======================================== */\n\nmj-filter-rule .custom-dropdown {\n  position: relative;\n  min-width: 160px;\n}\n\nmj-filter-rule .custom-dropdown.field-dropdown {\n  min-width: 180px;\n}\n\nmj-filter-rule .custom-dropdown.operator-dropdown {\n  min-width: 160px;\n}\n\nmj-filter-rule .custom-dropdown.value-dropdown {\n  min-width: 160px;\n  flex: 1;\n}\n\nmj-filter-rule .custom-dropdown.disabled {\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n/* Dropdown Trigger Button */\nmj-filter-rule .dropdown-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 14px;\n  border: 1px solid #d4d4d8;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  background: white;\n  color: #374151;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  text-align: left;\n}\n\nmj-filter-rule .dropdown-trigger:hover:not(:disabled) {\n  border-color: #a1a1aa;\n  background: #fafafa;\n}\n\nmj-filter-rule .dropdown-trigger:focus {\n  outline: none;\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n  background: white;\n}\n\nmj-filter-rule .dropdown-trigger:disabled {\n  background-color: #f4f4f5;\n  color: #a1a1aa;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\nmj-filter-rule .custom-dropdown.open .dropdown-trigger {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n}\n\nmj-filter-rule .dropdown-value {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nmj-filter-rule .dropdown-arrow {\n  font-size: 10px;\n  color: #6b7280;\n  margin-left: 8px;\n  transition: transform 0.2s ease;\n}\n\nmj-filter-rule .custom-dropdown.open .dropdown-arrow {\n  transform: rotate(180deg);\n}\n\n/* Dropdown Menu */\nmj-filter-rule .dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  min-width: 100%;\n  max-height: 280px;\n  overflow-y: auto;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 10px;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);\n  z-index: 9999;\n  animation: dropdownFadeIn 0.15s ease;\n}\n\n@keyframes dropdownFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Dropdown Items */\nmj-filter-rule .dropdown-item {\n  padding: 10px 14px;\n  font-size: 14px;\n  color: #374151;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border-bottom: 1px solid #f3f4f6;\n}\n\nmj-filter-rule .dropdown-item:last-child {\n  border-bottom: none;\n}\n\nmj-filter-rule .dropdown-item:hover,\nmj-filter-rule .dropdown-item.highlighted {\n  background: #f0f9ff;\n  color: #1d4ed8;\n}\n\nmj-filter-rule .dropdown-item.highlighted {\n  outline: 2px solid #3b82f6;\n  outline-offset: -2px;\n}\n\nmj-filter-rule .dropdown-item.selected {\n  background: #eff6ff;\n  color: #1d4ed8;\n  font-weight: 600;\n}\n\nmj-filter-rule .dropdown-item.selected::before {\n  content: '\\f00c';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n  font-size: 10px;\n  margin-right: 8px;\n  color: #3b82f6;\n}\n\nmj-filter-rule .dropdown-empty {\n  padding: 16px;\n  text-align: center;\n  color: #9ca3af;\n  font-size: 13px;\n  font-style: italic;\n}\n\n/* Scrollbar styling for dropdown */\nmj-filter-rule .dropdown-menu::-webkit-scrollbar {\n  width: 6px;\n}\n\nmj-filter-rule .dropdown-menu::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 3px;\n}\n\nmj-filter-rule .dropdown-menu::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 3px;\n}\n\nmj-filter-rule .dropdown-menu::-webkit-scrollbar-thumb:hover {\n  background: #a1a1a1;\n}\n\n/* ========================================\n   VALUE INPUT STYLES\n   ======================================== */\n\nmj-filter-rule .value-input {\n  padding: 10px 14px;\n  border: 1px solid #d4d4d8;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  background-color: white;\n  color: #374151;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n  flex: 1;\n  min-width: 150px;\n}\n\nmj-filter-rule .value-input:hover:not(:disabled) {\n  border-color: #a1a1aa;\n  background-color: #fafafa;\n}\n\nmj-filter-rule .value-input:focus {\n  outline: none;\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n  background-color: white;\n}\n\nmj-filter-rule .value-input:disabled {\n  background-color: #f4f4f5;\n  color: #a1a1aa;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\nmj-filter-rule .value-input::placeholder {\n  color: #9ca3af;\n  font-weight: 400;\n}\n\nmj-filter-rule .value-date {\n  min-width: 160px;\n}\n\n/* ========================================\n   BOOLEAN TOGGLE STYLES\n   ======================================== */\n\nmj-filter-rule .value-toggle {\n  display: flex;\n  background: #f4f4f5;\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid #e5e7eb;\n}\n\nmj-filter-rule .toggle-btn {\n  padding: 8px 18px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #71717a;\n}\n\nmj-filter-rule .toggle-btn:hover:not(:disabled) {\n  color: #3f3f46;\n  background: rgba(255, 255, 255, 0.5);\n}\n\nmj-filter-rule .toggle-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\nmj-filter-rule .toggle-btn.active {\n  background: white;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  color: #18181b;\n}\n\nmj-filter-rule .toggle-btn.true.active {\n  color: #16a34a;\n}\n\nmj-filter-rule .toggle-btn.false.active {\n  color: #dc2626;\n}\n\n/* ========================================\n   RULE ACTIONS\n   ======================================== */\n\nmj-filter-rule .rule-actions {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\nmj-filter-rule .action-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  color: #a1a1aa;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\nmj-filter-rule .action-btn:hover:not(:disabled) {\n  background: #f4f4f5;\n  color: #71717a;\n}\n\nmj-filter-rule .action-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.3;\n}\n\nmj-filter-rule .action-btn.delete:hover:not(:disabled) {\n  background: #fef2f2;\n  color: #ef4444;\n}\n\n/* ========================================\n   RESPONSIVE\n   ======================================== */\n\n@media (max-width: 768px) {\n  mj-filter-rule .filter-rule {\n    flex-wrap: wrap;\n  }\n\n  mj-filter-rule .custom-dropdown,\n  mj-filter-rule .value-input {\n    min-width: 100%;\n    flex: 1 1 100%;\n  }\n\n  mj-filter-rule .custom-dropdown.field-dropdown,\n  mj-filter-rule .custom-dropdown.operator-dropdown,\n  mj-filter-rule .custom-dropdown.value-dropdown {\n    min-width: 100%;\n  }\n}\n"] }]
+    }], () => [{ type: i0.ElementRef }], { filter: [{
+            type: Input
+        }], fields: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], showDelete: [{
+            type: Input
+        }], filterChange: [{
+            type: Output
+        }], delete: [{
+            type: Output
+        }], onDocumentClick: [{
+            type: HostListener,
+            args: ['document:click', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilterRuleComponent, { className: "FilterRuleComponent", filePath: "src/lib/filter-rule/filter-rule.component.ts", lineNumber: 22 }); })();
+//# sourceMappingURL=filter-rule.component.js.map