import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { createEmptyFilter } from '@memberjunction/ng-filter-builder';
import * as i0 from "@angular/core";
import * as i1 from "@memberjunction/ng-filter-builder";
const _c0 = () => ({ showClearButton: false, applyOnChange: true });
function FilterDialogComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 5);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r1.getFilterCount());
} }
function FilterDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 0);
    i0.ɵɵlistener("click", function FilterDialogComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "div", 3);
    i0.ɵɵelement(4, "i", 4);
    i0.ɵɵelementStart(5, "span");
    i0.ɵɵtext(6, "Edit Filters");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(7, FilterDialogComponent_Conditional_0_Conditional_7_Template, 2, 1, "span", 5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "button", 6);
    i0.ɵɵlistener("click", function FilterDialogComponent_Conditional_0_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
    i0.ɵɵelement(9, "i", 7);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(10, "div", 8)(11, "mj-filter-builder", 9);
    i0.ɵɵlistener("filterChange", function FilterDialogComponent_Conditional_0_Template_mj_filter_builder_filterChange_11_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChange($event)); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(12, "div", 10)(13, "button", 11);
    i0.ɵɵlistener("click", function FilterDialogComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClear()); });
    i0.ɵɵelement(14, "i", 12);
    i0.ɵɵtext(15, " Clear All ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "div", 13)(17, "button", 14);
    i0.ɵɵlistener("click", function FilterDialogComponent_Conditional_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
    i0.ɵɵtext(18, " Cancel ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(19, "button", 15);
    i0.ɵɵlistener("click", function FilterDialogComponent_Conditional_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onApply()); });
    i0.ɵɵelement(20, "i", 16);
    i0.ɵɵtext(21, " Apply Filters ");
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(7);
    i0.ɵɵconditional(ctx_r1.getFilterCount() > 0 ? 7 : -1);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("fields", ctx_r1.fields)("filter", ctx_r1.workingFilter)("disabled", ctx_r1.disabled)("showSummary", true)("config", i0.ɵɵpureFunction0(8, _c0));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("disabled", ctx_r1.disabled || ctx_r1.getFilterCount() === 0);
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("disabled", ctx_r1.disabled);
} }
/**
 * FilterDialogComponent - Modal dialog for editing filters
 *
 * Provides a full-width editing experience for the filter builder,
 * suitable for complex filter expressions.
 */
export class FilterDialogComponent {
    /**
     * Whether the dialog is open
     */
    isOpen = false;
    /**
     * Available fields to filter on
     */
    fields = [];
    /**
     * Current filter state
     */
    filter = createEmptyFilter();
    /**
     * Whether the filter builder is disabled (read-only mode)
     */
    disabled = false;
    /**
     * Emitted when the dialog should close
     */
    close = new EventEmitter();
    /**
     * Emitted when the filter is applied
     */
    apply = new EventEmitter();
    /**
     * Internal working copy of the filter
     */
    workingFilter = createEmptyFilter();
    /**
     * Handle Escape key to close dialog
     */
    handleEscape() {
        if (this.isOpen) {
            this.onCancel();
        }
    }
    ngOnInit() {
        this.initializeWorkingFilter();
    }
    /**
     * Initialize working filter when input changes
     */
    ngOnChanges() {
        if (this.isOpen) {
            this.initializeWorkingFilter();
        }
    }
    /**
     * Create a working copy of the filter
     */
    initializeWorkingFilter() {
        // Deep clone to avoid mutating the original
        this.workingFilter = JSON.parse(JSON.stringify(this.filter || createEmptyFilter()));
    }
    /**
     * Handle filter changes from the filter builder
     */
    onFilterChange(filter) {
        this.workingFilter = filter;
    }
    /**
     * Apply the filter and close
     */
    onApply() {
        this.apply.emit(this.workingFilter);
        this.close.emit();
    }
    /**
     * Cancel and close without saving
     */
    onCancel() {
        this.close.emit();
    }
    /**
     * Clear all filters
     */
    onClear() {
        this.workingFilter = createEmptyFilter();
    }
    /**
     * Get filter count for display
     */
    getFilterCount() {
        return this.countFilters(this.workingFilter);
    }
    /**
     * Count filters recursively
     */
    countFilters(filter) {
        let count = 0;
        for (const item of filter.filters || []) {
            if ('logic' in item && 'filters' in item) {
                count += this.countFilters(item);
            }
            else if ('field' in item) {
                count++;
            }
        }
        return count;
    }
    static ɵfac = function FilterDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FilterDialogComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterDialogComponent, selectors: [["mj-filter-dialog"]], hostBindings: function FilterDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("keydown.escape", function FilterDialogComponent_keydown_escape_HostBindingHandler() { return ctx.handleEscape(); }, i0.ɵɵresolveDocument);
        } }, inputs: { isOpen: "isOpen", fields: "fields", filter: "filter", disabled: "disabled" }, outputs: { close: "close", apply: "apply" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "dialog-backdrop", 3, "click"], [1, "filter-dialog"], [1, "dialog-header"], [1, "header-title"], [1, "fa-solid", "fa-filter"], [1, "filter-badge"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "dialog-content"], [3, "filterChange", "fields", "filter", "disabled", "showSummary", "config"], [1, "dialog-footer"], [1, "footer-btn", "clear-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-eraser"], [1, "footer-right"], [1, "footer-btn", "cancel-btn", 3, "click"], [1, "footer-btn", "apply-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-check"]], template: function FilterDialogComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, FilterDialogComponent_Conditional_0_Template, 22, 9);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.isOpen ? 0 : -1);
        } }, dependencies: [i1.FilterBuilderComponent], styles: ["\n\n.dialog-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n\n\n.filter-dialog[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90%;\n  max-width: 800px;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 16px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  min-height: 200px;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  border-radius: 0 0 12px 12px;\n  flex-shrink: 0;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-border-default);\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.apply-btn[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.apply-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n@media (max-width: 600px) {\n  .filter-dialog[_ngcontent-%COMP%] {\n    width: 95%;\n    max-height: 90vh;\n    border-radius: 8px;\n  }\n\n  .dialog-header[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n  }\n\n  .header-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .dialog-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .footer-right[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .footer-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .clear-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n  }\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterDialogComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-filter-dialog', template: "@if (isOpen) {\n  <!-- Backdrop -->\n  <div class=\"dialog-backdrop\" (click)=\"onCancel()\"></div>\n\n  <!-- Dialog -->\n  <div class=\"filter-dialog\">\n    <!-- Header -->\n    <div class=\"dialog-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-filter\"></i>\n        <span>Edit Filters</span>\n        @if (getFilterCount() > 0) {\n          <span class=\"filter-badge\">{{ getFilterCount() }}</span>\n        }\n      </div>\n      <button class=\"close-btn\" (click)=\"onCancel()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"dialog-content\">\n      <mj-filter-builder\n        [fields]=\"fields\"\n        [filter]=\"workingFilter\"\n        [disabled]=\"disabled\"\n        [showSummary]=\"true\"\n        [config]=\"{ showClearButton: false, applyOnChange: true }\"\n        (filterChange)=\"onFilterChange($event)\">\n      </mj-filter-builder>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"dialog-footer\">\n      <button class=\"footer-btn clear-btn\" (click)=\"onClear()\" [disabled]=\"disabled || getFilterCount() === 0\">\n        <i class=\"fa-solid fa-eraser\"></i>\n        Clear All\n      </button>\n      <div class=\"footer-right\">\n        <button class=\"footer-btn cancel-btn\" (click)=\"onCancel()\">\n          Cancel\n        </button>\n        <button class=\"footer-btn apply-btn\" (click)=\"onApply()\" [disabled]=\"disabled\">\n          <i class=\"fa-solid fa-check\"></i>\n          Apply Filters\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* Backdrop */\n.dialog-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  animation: fadeIn 0.15s ease;\n}\n\n/* Dialog */\n.filter-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90%;\n  max-width: 800px;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  animation: slideIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -48%);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* Header */\n.dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title i {\n  color: var(--mj-brand-primary);\n}\n\n.filter-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.close-btn {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 16px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n/* Content */\n.dialog-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  min-height: 200px;\n}\n\n/* Footer */\n.dialog-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  border-radius: 0 0 12px 12px;\n  flex-shrink: 0;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.footer-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn i {\n  font-size: 12px;\n}\n\n.clear-btn {\n  background: transparent;\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-border-default);\n}\n\n.clear-btn:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n.cancel-btn {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.cancel-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.apply-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.apply-btn:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* Responsive */\n@media (max-width: 600px) {\n  .filter-dialog {\n    width: 95%;\n    max-height: 90vh;\n    border-radius: 8px;\n  }\n\n  .dialog-header {\n    padding: 14px 16px;\n  }\n\n  .header-title {\n    font-size: 16px;\n  }\n\n  .dialog-content {\n    padding: 16px;\n  }\n\n  .dialog-footer {\n    flex-direction: column;\n    gap: 12px;\n    padding: 14px 16px;\n  }\n\n  .footer-right {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .footer-btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .clear-btn {\n    width: 100%;\n    justify-content: center;\n  }\n}\n"] }]
    }], null, { isOpen: [{
            type: Input
        }], fields: [{
            type: Input
        }], filter: [{
            type: Input
        }], disabled: [{
            type: Input
        }], close: [{
            type: Output
        }], apply: [{
            type: Output
        }], handleEscape: [{
            type: HostListener,
            args: ['document:keydown.escape']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilterDialogComponent, { className: "FilterDialogComponent", filePath: "src/DataExplorer/components/filter-dialog/filter-dialog.component.ts", lineNumber: 16 }); })();
//# sourceMappingURL=filter-dialog.component.js.map