@memberjunction/ng-filter-builder 0.0.1 → 2.123.1

package/dist/lib/filter-builder/filter-builder.component.d.ts

@@ -0,0 +1,155 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { CompositeFilterDescriptor, FilterFieldInfo, FilterBuilderConfig } from '../types/filter.types';
+import * as i0 from "@angular/core";
+/**
+ * FilterBuilderComponent - Main filter builder component
+ *
+ * Provides a complete UI for building complex filter expressions
+ * with AND/OR logic and nested groups. Outputs Kendo-compatible
+ * CompositeFilterDescriptor JSON format.
+ *
+ * @example
+ * ```html
+ * <mj-filter-builder
+ *   [fields]="filterFields"
+ *   [filter]="currentFilter"
+ *   (filterChange)="onFilterChange($event)"
+ *   (apply)="onApply($event)">
+ * </mj-filter-builder>
+ * ```
+ */
+export declare class FilterBuilderComponent implements OnInit, OnChanges {
+    private sanitizer;
+    /**
+     * Available fields to filter on
+     */
+    fields: FilterFieldInfo[];
+    /**
+     * Current filter state (Kendo-compatible CompositeFilterDescriptor)
+     */
+    filter: CompositeFilterDescriptor | null;
+    /**
+     * Configuration options
+     */
+    config: Partial<FilterBuilderConfig>;
+    /**
+     * Whether the component is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to show the natural language filter summary at the bottom
+     */
+    showSummary: boolean;
+    /**
+     * Whether the filter summary is expanded (visible)
+     */
+    isSummaryExpanded: boolean;
+    /**
+     * Emitted when the filter changes
+     */
+    filterChange: EventEmitter<CompositeFilterDescriptor>;
+    /**
+     * Emitted when the Apply button is clicked (if showApplyButton is true)
+     */
+    apply: EventEmitter<CompositeFilterDescriptor>;
+    /**
+     * Emitted when the Clear button is clicked
+     */
+    clear: EventEmitter<void>;
+    /**
+     * Internal filter state
+     */
+    internalFilter: CompositeFilterDescriptor;
+    /**
+     * Merged configuration
+     */
+    mergedConfig: FilterBuilderConfig;
+    /**
+     * Whether there are any active filters
+     */
+    hasActiveFilters: boolean;
+    constructor(sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Initialize the internal filter state
+     */
+    private initializeFilter;
+    /**
+     * Merge provided config with defaults
+     */
+    private mergeConfig;
+    /**
+     * Handle filter change from the filter group
+     */
+    onFilterChange(filter: CompositeFilterDescriptor): void;
+    /**
+     * Handle Apply button click
+     */
+    onApply(): void;
+    /**
+     * Handle Clear button click
+     */
+    onClear(): void;
+    /**
+     * Get the count of active filter rules
+     */
+    getFilterCount(): number;
+    /**
+     * Count filters recursively
+     */
+    private countFilters;
+    /**
+     * Update hasActiveFilters flag
+     */
+    private updateHasActiveFilters;
+    /**
+     * Deep clone a filter to prevent mutation
+     */
+    private deepCloneFilter;
+    /**
+     * Toggle the filter summary visibility
+     */
+    toggleSummary(): void;
+    /**
+     * Generate HTML-formatted summary of the filter expression with syntax highlighting
+     */
+    getFilterSummaryHtml(): SafeHtml;
+    /**
+     * Inline styles for syntax highlighting (needed because Angular view encapsulation
+     * doesn't apply component CSS to dynamically injected innerHTML)
+     */
+    private readonly styles;
+    /**
+     * Build HTML summary recursively with indentation and syntax highlighting
+     */
+    private buildFilterSummaryHtml;
+    /**
+     * Build HTML summary for a single rule with syntax highlighting
+     */
+    private buildRuleSummaryHtml;
+    /**
+     * Check if operator is a null-check operator (doesn't need a value)
+     */
+    private isNullCheckOperator;
+    /**
+     * Get human-readable label for an operator
+     */
+    private getOperatorLabel;
+    /**
+     * Format a value for HTML display with syntax highlighting
+     */
+    private formatValueHtml;
+    /**
+     * Check if a string looks like an ISO date
+     */
+    private isIsoDateString;
+    /**
+     * Escape HTML characters to prevent XSS
+     */
+    private escapeHtml;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterBuilderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterBuilderComponent, "mj-filter-builder", never, { "fields": { "alias": "fields"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "config": { "alias": "config"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showSummary": { "alias": "showSummary"; "required": false; }; }, { "filterChange": "filterChange"; "apply": "apply"; "clear": "clear"; }, never, never, false, never>;
+}
+//# sourceMappingURL=filter-builder.component.d.ts.map

package/dist/lib/filter-builder/filter-builder.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-builder.component.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-builder/filter-builder.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACL,yBAAyB,EAEzB,eAAe,EACf,mBAAmB,EAGpB,MAAM,uBAAuB,CAAC;;AAa/B;;;;;;;;;;;;;;;;GAgBG;AACH,qBAKa,sBAAuB,YAAW,MAAM,EAAE,SAAS;IA6DlD,OAAO,CAAC,SAAS;IA5D7B;;OAEG;IACM,MAAM,EAAE,eAAe,EAAE,CAAM;IAExC;;OAEG;IACM,MAAM,EAAE,yBAAyB,GAAG,IAAI,CAAQ;IAEzD;;OAEG;IACM,MAAM,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAM;IAEnD;;OAEG;IACM,QAAQ,EAAE,OAAO,CAAS;IAEnC;;OAEG;IACM,WAAW,EAAE,OAAO,CAAS;IAEtC;;OAEG;IACI,iBAAiB,EAAE,OAAO,CAAS;IAE1C;;OAEG;IACO,YAAY,0CAAiD;IAEvE;;OAEG;IACO,KAAK,0CAAiD;IAEhE;;OAEG;IACO,KAAK,qBAA4B;IAE3C;;OAEG;IACI,cAAc,EAAE,yBAAyB,CAAuB;IAEvE;;OAEG;IACI,YAAY,EAAE,mBAAmB,CAAyB;IAEjE;;OAEG;IACI,gBAAgB,EAAE,OAAO,CAAS;gBAErB,SAAS,EAAE,YAAY;IAE3C,QAAQ,IAAI,IAAI;IAKhB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IASzC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,cAAc,CAAC,MAAM,EAAE,yBAAyB,GAAG,IAAI;IASvD;;OAEG;IACH,OAAO,IAAI,IAAI;IAKf;;OAEG;IACH,OAAO,IAAI,IAAI;IAOf;;OAEG;IACH,cAAc,IAAI,MAAM;IAIxB;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAI9B;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,aAAa,IAAI,IAAI;IAIrB;;OAEG;IACH,oBAAoB,IAAI,QAAQ;IAQhC;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,MAAM,CAWrB;IAEF;;OAEG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA0B5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoBxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAmDvB;;OAEG;IACH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IACH,OAAO,CAAC,UAAU;yCAtWP,sBAAsB;2CAAtB,sBAAsB;CA2WlC"}

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

@@ -0,0 +1,482 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { createEmptyFilter, isCompositeFilter } from '../types/filter.types';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/platform-browser";
+import * as i2 from "../filter-group/filter-group.component";
+function FilterBuilderComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", ctx_r0.getFilterCount(), " condition", ctx_r0.getFilterCount() !== 1 ? "s" : "", "");
+} }
+function FilterBuilderComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1, "No filters applied");
+    i0.ɵɵelementEnd();
+} }
+function FilterBuilderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function FilterBuilderComponent_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onClear()); });
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Clear All");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r0.disabled);
+} }
+function FilterBuilderComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function FilterBuilderComponent_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onApply()); });
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Apply");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r0.disabled);
+} }
+function FilterBuilderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "p");
+    i0.ɵɵelement(2, "i", 18);
+    i0.ɵɵelementStart(3, "strong");
+    i0.ɵɵtext(4, "Tip:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(5, " Click \"Add Condition\" to create filter rules. Use \"Add Group\" for complex AND/OR combinations. ");
+    i0.ɵɵelementEnd()();
+} }
+function FilterBuilderComponent_Conditional_13_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "pre", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r0.getFilterSummaryHtml(), i0.ɵɵsanitizeHtml);
+} }
+function FilterBuilderComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "button", 20);
+    i0.ɵɵlistener("click", function FilterBuilderComponent_Conditional_13_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleSummary()); });
+    i0.ɵɵelement(2, "i", 21)(3, "i", 22);
+    i0.ɵɵelementStart(4, "span", 23);
+    i0.ɵɵtext(5, "View Filter Expression");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 24);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(8, FilterBuilderComponent_Conditional_13_Conditional_8_Template, 2, 1, "div", 25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("expanded", ctx_r0.isSummaryExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-chevron-right", !ctx_r0.isSummaryExpanded)("fa-chevron-down", ctx_r0.isSummaryExpanded);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.getFilterCount());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isSummaryExpanded ? 8 : -1);
+} }
+/**
+ * Default configuration for the filter builder
+ */
+const DEFAULT_CONFIG = {
+    maxDepth: 3,
+    allowGroups: true,
+    showClearButton: true,
+    showApplyButton: false,
+    applyOnChange: true
+};
+/**
+ * FilterBuilderComponent - Main filter builder component
+ *
+ * Provides a complete UI for building complex filter expressions
+ * with AND/OR logic and nested groups. Outputs Kendo-compatible
+ * CompositeFilterDescriptor JSON format.
+ *
+ * @example
+ * ```html
+ * <mj-filter-builder
+ *   [fields]="filterFields"
+ *   [filter]="currentFilter"
+ *   (filterChange)="onFilterChange($event)"
+ *   (apply)="onApply($event)">
+ * </mj-filter-builder>
+ * ```
+ */
+export class FilterBuilderComponent {
+    sanitizer;
+    /**
+     * Available fields to filter on
+     */
+    fields = [];
+    /**
+     * Current filter state (Kendo-compatible CompositeFilterDescriptor)
+     */
+    filter = null;
+    /**
+     * Configuration options
+     */
+    config = {};
+    /**
+     * Whether the component is disabled
+     */
+    disabled = false;
+    /**
+     * Whether to show the natural language filter summary at the bottom
+     */
+    showSummary = false;
+    /**
+     * Whether the filter summary is expanded (visible)
+     */
+    isSummaryExpanded = false;
+    /**
+     * Emitted when the filter changes
+     */
+    filterChange = new EventEmitter();
+    /**
+     * Emitted when the Apply button is clicked (if showApplyButton is true)
+     */
+    apply = new EventEmitter();
+    /**
+     * Emitted when the Clear button is clicked
+     */
+    clear = new EventEmitter();
+    /**
+     * Internal filter state
+     */
+    internalFilter = createEmptyFilter();
+    /**
+     * Merged configuration
+     */
+    mergedConfig = { ...DEFAULT_CONFIG };
+    /**
+     * Whether there are any active filters
+     */
+    hasActiveFilters = false;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    ngOnInit() {
+        this.initializeFilter();
+        this.mergeConfig();
+    }
+    ngOnChanges(changes) {
+        if (changes['filter']) {
+            this.initializeFilter();
+        }
+        if (changes['config']) {
+            this.mergeConfig();
+        }
+    }
+    /**
+     * Initialize the internal filter state
+     */
+    initializeFilter() {
+        if (this.filter && isCompositeFilter(this.filter)) {
+            this.internalFilter = this.deepCloneFilter(this.filter);
+        }
+        else {
+            this.internalFilter = createEmptyFilter();
+        }
+        this.updateHasActiveFilters();
+    }
+    /**
+     * Merge provided config with defaults
+     */
+    mergeConfig() {
+        this.mergedConfig = { ...DEFAULT_CONFIG, ...this.config };
+    }
+    /**
+     * Handle filter change from the filter group
+     */
+    onFilterChange(filter) {
+        this.internalFilter = filter;
+        this.updateHasActiveFilters();
+        if (this.mergedConfig.applyOnChange) {
+            this.filterChange.emit(filter);
+        }
+    }
+    /**
+     * Handle Apply button click
+     */
+    onApply() {
+        this.filterChange.emit(this.internalFilter);
+        this.apply.emit(this.internalFilter);
+    }
+    /**
+     * Handle Clear button click
+     */
+    onClear() {
+        this.internalFilter = createEmptyFilter();
+        this.updateHasActiveFilters();
+        this.filterChange.emit(this.internalFilter);
+        this.clear.emit();
+    }
+    /**
+     * Get the count of active filter rules
+     */
+    getFilterCount() {
+        return this.countFilters(this.internalFilter);
+    }
+    /**
+     * Count filters recursively
+     */
+    countFilters(filter) {
+        let count = 0;
+        for (const item of filter.filters || []) {
+            if (isCompositeFilter(item)) {
+                count += this.countFilters(item);
+            }
+            else {
+                // Only count if the filter has a valid field and value (or null-check operators)
+                const rule = item;
+                if (rule.field) {
+                    count++;
+                }
+            }
+        }
+        return count;
+    }
+    /**
+     * Update hasActiveFilters flag
+     */
+    updateHasActiveFilters() {
+        this.hasActiveFilters = this.getFilterCount() > 0;
+    }
+    /**
+     * Deep clone a filter to prevent mutation
+     */
+    deepCloneFilter(filter) {
+        return JSON.parse(JSON.stringify(filter));
+    }
+    /**
+     * Toggle the filter summary visibility
+     */
+    toggleSummary() {
+        this.isSummaryExpanded = !this.isSummaryExpanded;
+    }
+    /**
+     * Generate HTML-formatted summary of the filter expression with syntax highlighting
+     */
+    getFilterSummaryHtml() {
+        if (!this.hasActiveFilters) {
+            return this.sanitizer.bypassSecurityTrustHtml('<span style="color: #9ca3af; font-style: italic;">No filters applied</span>');
+        }
+        const html = this.buildFilterSummaryHtml(this.internalFilter, 0);
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    /**
+     * Inline styles for syntax highlighting (needed because Angular view encapsulation
+     * doesn't apply component CSS to dynamically injected innerHTML)
+     */
+    styles = {
+        fieldName: 'color: #0369a1; font-weight: 600;',
+        operator: 'color: #6b7280; font-style: italic;',
+        valueString: 'color: #059669; font-weight: 500;',
+        valueNumber: 'color: #7c3aed; font-weight: 500;',
+        valueDate: 'color: #c2410c; font-weight: 500;',
+        valueTrue: 'color: #16a34a; font-weight: 600;',
+        valueFalse: 'color: #dc2626; font-weight: 600;',
+        logicAnd: 'display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; background: #dbeafe; color: #1d4ed8;',
+        logicOr: 'display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; background: #fef3c7; color: #b45309;',
+        groupBracket: 'color: #9333ea; font-weight: 700; font-size: 15px;'
+    };
+    /**
+     * Build HTML summary recursively with indentation and syntax highlighting
+     */
+    buildFilterSummaryHtml(filter, depth) {
+        const parts = [];
+        const indent = '  '.repeat(depth);
+        for (const item of filter.filters || []) {
+            if (isCompositeFilter(item)) {
+                const groupSummary = this.buildFilterSummaryHtml(item, depth + 1);
+                if (groupSummary) {
+                    parts.push(`<span style="${this.styles.groupBracket}">(</span>\n${groupSummary}\n${indent}<span style="${this.styles.groupBracket}">)</span>`);
+                }
+            }
+            else {
+                const rule = item;
+                const ruleSummary = this.buildRuleSummaryHtml(rule);
+                if (ruleSummary) {
+                    parts.push(ruleSummary);
+                }
+            }
+        }
+        if (parts.length === 0) {
+            return '';
+        }
+        const logicStyle = filter.logic === 'and' ? this.styles.logicAnd : this.styles.logicOr;
+        const logicLabel = filter.logic === 'and' ? 'AND' : 'OR';
+        const connector = `\n${indent}<span style="${logicStyle}">${logicLabel}</span>\n${indent}`;
+        return `${indent}${parts.join(connector)}`;
+    }
+    /**
+     * Build HTML summary for a single rule with syntax highlighting
+     */
+    buildRuleSummaryHtml(rule) {
+        if (!rule.field) {
+            return '';
+        }
+        // Get the field display name
+        const field = this.fields.find(f => f.name === rule.field);
+        const fieldName = field?.displayName || rule.field;
+        // Get the operator label
+        const operatorLabel = this.getOperatorLabel(rule.operator);
+        // Format the value
+        const formattedValue = this.formatValueHtml(rule.value, rule.operator);
+        // Build the summary based on operator type
+        const fieldHtml = `<span style="${this.styles.fieldName}">${this.escapeHtml(fieldName)}</span>`;
+        const operatorHtml = `<span style="${this.styles.operator}">${operatorLabel}</span>`;
+        if (this.isNullCheckOperator(rule.operator)) {
+            return `${fieldHtml} ${operatorHtml}`;
+        }
+        return `${fieldHtml} ${operatorHtml} ${formattedValue}`;
+    }
+    /**
+     * Check if operator is a null-check operator (doesn't need a value)
+     */
+    isNullCheckOperator(operator) {
+        return ['isnull', 'isnotnull', 'isempty', 'isnotempty'].includes(operator);
+    }
+    /**
+     * Get human-readable label for an operator
+     */
+    getOperatorLabel(operator) {
+        const labels = {
+            'eq': 'equals',
+            'neq': 'does not equal',
+            'contains': 'contains',
+            'doesnotcontain': 'does not contain',
+            'startswith': 'starts with',
+            'endswith': 'ends with',
+            'isnull': 'is empty',
+            'isnotnull': 'is not empty',
+            'isempty': 'is empty',
+            'isnotempty': 'is not empty',
+            'gt': 'is greater than',
+            'gte': 'is greater than or equal to',
+            'lt': 'is less than',
+            'lte': 'is less than or equal to'
+        };
+        return labels[operator] || operator;
+    }
+    /**
+     * Format a value for HTML display with syntax highlighting
+     */
+    formatValueHtml(value, operator) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        // Don't show value for null-check operators
+        if (this.isNullCheckOperator(operator)) {
+            return '';
+        }
+        // Handle ISO date strings
+        if (typeof value === 'string' && this.isIsoDateString(value)) {
+            const date = new Date(value);
+            const formatted = date.toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+            });
+            return `<span style="${this.styles.valueDate}">${formatted}</span>`;
+        }
+        // Handle strings
+        if (typeof value === 'string') {
+            return `<span style="${this.styles.valueString}">"${this.escapeHtml(value)}"</span>`;
+        }
+        // Handle booleans
+        if (typeof value === 'boolean') {
+            const boolStyle = value ? this.styles.valueTrue : this.styles.valueFalse;
+            return `<span style="${boolStyle}">${value ? 'Yes' : 'No'}</span>`;
+        }
+        // Handle numbers
+        if (typeof value === 'number') {
+            return `<span style="${this.styles.valueNumber}">${value}</span>`;
+        }
+        // Handle Date objects
+        if (value instanceof Date) {
+            const formatted = value.toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+            });
+            return `<span style="${this.styles.valueDate}">${formatted}</span>`;
+        }
+        // Default
+        return `<span style="font-weight: 500;">${this.escapeHtml(String(value))}</span>`;
+    }
+    /**
+     * Check if a string looks like an ISO date
+     */
+    isIsoDateString(value) {
+        // Match ISO 8601 date format
+        return /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?)?$/.test(value);
+    }
+    /**
+     * Escape HTML characters to prevent XSS
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    static ɵfac = function FilterBuilderComponent_Factory(t) { return new (t || FilterBuilderComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterBuilderComponent, selectors: [["mj-filter-builder"]], inputs: { fields: "fields", filter: "filter", config: "config", disabled: "disabled", showSummary: "showSummary" }, outputs: { filterChange: "filterChange", apply: "apply", clear: "clear" }, features: [i0.ɵɵNgOnChangesFeature], decls: 14, vars: 13, consts: [[1, "filter-builder"], [1, "filter-header"], [1, "filter-summary"], [1, "filter-icon"], [1, "fa-solid", "fa-filter"], [1, "filter-count"], [1, "filter-count", "no-filters"], [1, "filter-actions"], ["type", "button", "title", "Clear all filters", 1, "action-btn", "clear-btn", 3, "disabled"], ["type", "button", "title", "Apply filters", 1, "action-btn", "apply-btn", 3, "disabled"], [1, "filter-content"], [3, "filterChange", "filter", "fields", "isRoot", "depth", "maxDepth", "disabled"], [1, "filter-tips"], [1, "filter-expression-summary", 3, "expanded"], ["type", "button", "title", "Clear all filters", 1, "action-btn", "clear-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], ["type", "button", "title", "Apply filters", 1, "action-btn", "apply-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-lightbulb"], [1, "filter-expression-summary"], ["type", "button", 1, "expression-toggle", 3, "click"], [1, "fa-solid"], [1, "fa-solid", "fa-code", "expression-icon"], [1, "expression-label"], [1, "expression-badge"], [1, "expression-content"], [1, "expression-text", 3, "innerHTML"]], template: function FilterBuilderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "span", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(5, FilterBuilderComponent_Conditional_5_Template, 2, 2, "span", 5)(6, FilterBuilderComponent_Conditional_6_Template, 2, 0, "span", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "div", 7);
+            i0.ɵɵtemplate(8, FilterBuilderComponent_Conditional_8_Template, 4, 1, "button", 8)(9, FilterBuilderComponent_Conditional_9_Template, 4, 1, "button", 9);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 10)(11, "mj-filter-group", 11);
+            i0.ɵɵlistener("filterChange", function FilterBuilderComponent_Template_mj_filter_group_filterChange_11_listener($event) { return ctx.onFilterChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(12, FilterBuilderComponent_Conditional_12_Template, 6, 0, "div", 12)(13, FilterBuilderComponent_Conditional_13_Template, 9, 8, "div", 13);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("disabled", ctx.disabled);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.hasActiveFilters ? 5 : 6);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.mergedConfig.showClearButton && ctx.hasActiveFilters ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.mergedConfig.showApplyButton ? 9 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("filter", ctx.internalFilter)("fields", ctx.fields)("isRoot", true)("depth", 0)("maxDepth", ctx.mergedConfig.maxDepth)("disabled", ctx.disabled);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.hasActiveFilters ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showSummary && ctx.hasActiveFilters ? 13 : -1);
+        } }, dependencies: [i2.FilterGroupComponent], styles: [".filter-builder[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.filter-builder.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n\n\n.filter-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 12px;\n  border-bottom: 1px solid #eee;\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  color: #1976d2;\n  font-size: 14px;\n}\n\n.filter-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #333;\n  font-weight: 500;\n}\n\n.filter-count.no-filters[_ngcontent-%COMP%] {\n  color: #999;\n  font-weight: 400;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n  background: #f5f5f5;\n  color: #666;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.apply-btn[_ngcontent-%COMP%] {\n  background: #1976d2;\n  color: white;\n}\n\n.apply-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1565c0;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n  min-height: 60px;\n}\n\n\n\n.filter-tips[_ngcontent-%COMP%] {\n  padding: 12px;\n  background: #f5f9ff;\n  border-radius: 6px;\n  border: 1px solid #e3edfa;\n}\n\n.filter-tips[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.filter-tips[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #ffc107;\n  margin-top: 2px;\n}\n\n.filter-tips[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: #333;\n}\n\n\n\n.filter-expression-summary[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  margin-top: 8px;\n  overflow: hidden;\n  transition: all 0.2s ease;\n}\n\n.filter-expression-summary.expanded[_ngcontent-%COMP%] {\n  background: white;\n  border-color: #d1d5db;\n}\n\n\n\n.expression-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #6b7280;\n  text-align: left;\n  transition: all 0.15s ease;\n}\n\n.expression-toggle[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.03);\n  color: #374151;\n}\n\n.expression-toggle[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 10px;\n  color: #9ca3af;\n  width: 12px;\n  transition: transform 0.2s ease;\n}\n\n.expression-icon[_ngcontent-%COMP%] {\n  color: #6366f1;\n  font-size: 13px;\n}\n\n.expression-label[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.expression-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #e0e7ff;\n  color: #4f46e5;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n\n\n.expression-content[_ngcontent-%COMP%] {\n  padding: 0 16px 16px 16px;\n  animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.expression-text[_ngcontent-%COMP%] {\n  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;\n  font-size: 13px;\n  line-height: 1.8;\n  color: #374151;\n  padding: 16px;\n  margin: 0;\n  background: linear-gradient(135deg, #fafbfc 0%, #f3f4f6 100%);\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n\n\n.expression-text[_ngcontent-%COMP%]   .field-name[_ngcontent-%COMP%] {\n  color: #0369a1;\n  font-weight: 600;\n}\n\n.expression-text[_ngcontent-%COMP%]   .operator[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-style: italic;\n}\n\n.expression-text[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.expression-text[_ngcontent-%COMP%]   .value-string[_ngcontent-%COMP%] {\n  color: #059669;\n}\n\n.expression-text[_ngcontent-%COMP%]   .value-number[_ngcontent-%COMP%] {\n  color: #7c3aed;\n}\n\n.expression-text[_ngcontent-%COMP%]   .value-boolean[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.expression-text[_ngcontent-%COMP%]   .value-true[_ngcontent-%COMP%] {\n  color: #16a34a;\n}\n\n.expression-text[_ngcontent-%COMP%]   .value-false[_ngcontent-%COMP%] {\n  color: #dc2626;\n}\n\n.expression-text[_ngcontent-%COMP%]   .value-date[_ngcontent-%COMP%] {\n  color: #c2410c;\n  font-weight: 500;\n}\n\n.expression-text[_ngcontent-%COMP%]   .logic-keyword[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n}\n\n.expression-text[_ngcontent-%COMP%]   .logic-and[_ngcontent-%COMP%] {\n  background: #dbeafe;\n  color: #1d4ed8;\n}\n\n.expression-text[_ngcontent-%COMP%]   .logic-or[_ngcontent-%COMP%] {\n  background: #fef3c7;\n  color: #b45309;\n}\n\n.expression-text[_ngcontent-%COMP%]   .group-bracket[_ngcontent-%COMP%] {\n  color: #9333ea;\n  font-weight: 700;\n  font-size: 15px;\n}\n\n.expression-text[_ngcontent-%COMP%]   .no-filters[_ngcontent-%COMP%] {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n\n\n@media (max-width: 600px) {\n  .filter-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n  }\n\n  .filter-summary[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .filter-actions[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .expression-toggle[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n  }\n\n  .expression-content[_ngcontent-%COMP%] {\n    padding: 0 12px 12px 12px;\n  }\n\n  .expression-text[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 12px;\n  }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterBuilderComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-filter-builder', template: "<div class=\"filter-builder\" [class.disabled]=\"disabled\">\n  <!-- Header with summary and actions -->\n  <div class=\"filter-header\">\n    <div class=\"filter-summary\">\n      <span class=\"filter-icon\">\n        <i class=\"fa-solid fa-filter\"></i>\n      </span>\n      @if (hasActiveFilters) {\n        <span class=\"filter-count\">{{ getFilterCount() }} condition{{ getFilterCount() !== 1 ? 's' : '' }}</span>\n      } @else {\n        <span class=\"filter-count no-filters\">No filters applied</span>\n      }\n    </div>\n\n    <div class=\"filter-actions\">\n      @if (mergedConfig.showClearButton && hasActiveFilters) {\n        <button\n          type=\"button\"\n          class=\"action-btn clear-btn\"\n          (click)=\"onClear()\"\n          [disabled]=\"disabled\"\n          title=\"Clear all filters\">\n          <i class=\"fa-solid fa-times\"></i>\n          <span>Clear All</span>\n        </button>\n      }\n      @if (mergedConfig.showApplyButton) {\n        <button\n          type=\"button\"\n          class=\"action-btn apply-btn\"\n          (click)=\"onApply()\"\n          [disabled]=\"disabled\"\n          title=\"Apply filters\">\n          <i class=\"fa-solid fa-check\"></i>\n          <span>Apply</span>\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- Filter Builder Content -->\n  <div class=\"filter-content\">\n    <mj-filter-group\n      [filter]=\"internalFilter\"\n      [fields]=\"fields\"\n      [isRoot]=\"true\"\n      [depth]=\"0\"\n      [maxDepth]=\"mergedConfig.maxDepth\"\n      [disabled]=\"disabled\"\n      (filterChange)=\"onFilterChange($event)\">\n    </mj-filter-group>\n  </div>\n\n  <!-- Quick tips (shown when no filters) -->\n  @if (!hasActiveFilters) {\n    <div class=\"filter-tips\">\n      <p>\n        <i class=\"fa-solid fa-lightbulb\"></i>\n        <strong>Tip:</strong> Click \"Add Condition\" to create filter rules.\n        Use \"Add Group\" for complex AND/OR combinations.\n      </p>\n    </div>\n  }\n\n  <!-- Collapsible filter expression summary -->\n  @if (showSummary && hasActiveFilters) {\n    <div class=\"filter-expression-summary\" [class.expanded]=\"isSummaryExpanded\">\n      <button type=\"button\" class=\"expression-toggle\" (click)=\"toggleSummary()\">\n        <i class=\"fa-solid\" [class.fa-chevron-right]=\"!isSummaryExpanded\" [class.fa-chevron-down]=\"isSummaryExpanded\"></i>\n        <i class=\"fa-solid fa-code expression-icon\"></i>\n        <span class=\"expression-label\">View Filter Expression</span>\n        <span class=\"expression-badge\">{{ getFilterCount() }}</span>\n      </button>\n      @if (isSummaryExpanded) {\n        <div class=\"expression-content\">\n          <pre class=\"expression-text\" [innerHTML]=\"getFilterSummaryHtml()\"></pre>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-builder {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.filter-builder.disabled {\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n/* Header */\n.filter-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 12px;\n  border-bottom: 1px solid #eee;\n}\n\n.filter-summary {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-icon {\n  color: #1976d2;\n  font-size: 14px;\n}\n\n.filter-count {\n  font-size: 13px;\n  color: #333;\n  font-weight: 500;\n}\n\n.filter-count.no-filters {\n  color: #999;\n  font-weight: 400;\n}\n\n/* Actions */\n.filter-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: none;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.action-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.action-btn i {\n  font-size: 11px;\n}\n\n.clear-btn {\n  background: #f5f5f5;\n  color: #666;\n}\n\n.clear-btn:hover:not(:disabled) {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.apply-btn {\n  background: #1976d2;\n  color: white;\n}\n\n.apply-btn:hover:not(:disabled) {\n  background: #1565c0;\n}\n\n/* Content */\n.filter-content {\n  min-height: 60px;\n}\n\n/* Tips */\n.filter-tips {\n  padding: 12px;\n  background: #f5f9ff;\n  border-radius: 6px;\n  border: 1px solid #e3edfa;\n}\n\n.filter-tips p {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.filter-tips i {\n  color: #ffc107;\n  margin-top: 2px;\n}\n\n.filter-tips strong {\n  color: #333;\n}\n\n/* Collapsible Filter Expression Summary */\n.filter-expression-summary {\n  background: #f8f9fa;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  margin-top: 8px;\n  overflow: hidden;\n  transition: all 0.2s ease;\n}\n\n.filter-expression-summary.expanded {\n  background: white;\n  border-color: #d1d5db;\n}\n\n/* Toggle Button */\n.expression-toggle {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #6b7280;\n  text-align: left;\n  transition: all 0.15s ease;\n}\n\n.expression-toggle:hover {\n  background: rgba(0, 0, 0, 0.03);\n  color: #374151;\n}\n\n.expression-toggle i:first-child {\n  font-size: 10px;\n  color: #9ca3af;\n  width: 12px;\n  transition: transform 0.2s ease;\n}\n\n.expression-icon {\n  color: #6366f1;\n  font-size: 13px;\n}\n\n.expression-label {\n  flex: 1;\n}\n\n.expression-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  background: #e0e7ff;\n  color: #4f46e5;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n/* Expression Content */\n.expression-content {\n  padding: 0 16px 16px 16px;\n  animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.expression-text {\n  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;\n  font-size: 13px;\n  line-height: 1.8;\n  color: #374151;\n  padding: 16px;\n  margin: 0;\n  background: linear-gradient(135deg, #fafbfc 0%, #f3f4f6 100%);\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Syntax Highlighting */\n.expression-text .field-name {\n  color: #0369a1;\n  font-weight: 600;\n}\n\n.expression-text .operator {\n  color: #6b7280;\n  font-style: italic;\n}\n\n.expression-text .value {\n  font-weight: 500;\n}\n\n.expression-text .value-string {\n  color: #059669;\n}\n\n.expression-text .value-number {\n  color: #7c3aed;\n}\n\n.expression-text .value-boolean {\n  font-weight: 600;\n}\n\n.expression-text .value-true {\n  color: #16a34a;\n}\n\n.expression-text .value-false {\n  color: #dc2626;\n}\n\n.expression-text .value-date {\n  color: #c2410c;\n  font-weight: 500;\n}\n\n.expression-text .logic-keyword {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n}\n\n.expression-text .logic-and {\n  background: #dbeafe;\n  color: #1d4ed8;\n}\n\n.expression-text .logic-or {\n  background: #fef3c7;\n  color: #b45309;\n}\n\n.expression-text .group-bracket {\n  color: #9333ea;\n  font-weight: 700;\n  font-size: 15px;\n}\n\n.expression-text .no-filters {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n/* Responsive */\n@media (max-width: 600px) {\n  .filter-header {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n  }\n\n  .filter-summary {\n    justify-content: center;\n  }\n\n  .filter-actions {\n    justify-content: center;\n  }\n\n  .expression-toggle {\n    padding: 10px 12px;\n  }\n\n  .expression-content {\n    padding: 0 12px 12px 12px;\n  }\n\n  .expression-text {\n    font-size: 12px;\n    padding: 12px;\n  }\n}\n"] }]
+    }], () => [{ type: i1.DomSanitizer }], { fields: [{
+            type: Input
+        }], filter: [{
+            type: Input
+        }], config: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], showSummary: [{
+            type: Input
+        }], filterChange: [{
+            type: Output
+        }], apply: [{
+            type: Output
+        }], clear: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilterBuilderComponent, { className: "FilterBuilderComponent", filePath: "src/lib/filter-builder/filter-builder.component.ts", lineNumber: 45 }); })();
+//# sourceMappingURL=filter-builder.component.js.map