@memberjunction/ng-trees 0.0.1 → 3.1.0

package/dist/lib/tree-dropdown/tree-dropdown.component.js

@@ -0,0 +1,1012 @@
+/**
+ * Tree Dropdown Component for @memberjunction/ng-trees
+ *
+ * A searchable dropdown with tree selection. Features:
+ * - Smart positioning (auto-flips above/below based on available space)
+ * - Portal rendering to avoid clipping
+ * - Type-ahead search with highlighting
+ * - Keyboard navigation
+ * - Single and multi-select modes
+ */
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { BeforeSearchEventArgs, AfterSearchEventArgs, BeforeDropdownOpenEventArgs, AfterDropdownOpenEventArgs, BeforeDropdownCloseEventArgs, AfterDropdownCloseEventArgs } from '../events/tree-events';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { Metadata, CompositeKey } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../tree/tree.component";
+const _c0 = ["triggerElement"];
+const _c1 = ["searchInput"];
+const _c2 = ["dropdownPanel"];
+const _c3 = ["treeComponent"];
+const _c4 = () => ({});
+function TreeDropdownComponent_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("color", ctx_r1.getDisplayColor());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getDisplayIcon());
+} }
+function TreeDropdownComponent_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementEnd();
+} }
+function TreeDropdownComponent_button_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function TreeDropdownComponent_button_9_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Clear($event)); });
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelementEnd();
+} }
+function TreeDropdownComponent_div_12_div_2_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵlistener("click", function TreeDropdownComponent_div_12_div_2_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onClearSearch()); });
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelementEnd();
+} }
+function TreeDropdownComponent_div_12_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25);
+    i0.ɵɵelement(2, "i", 26);
+    i0.ɵɵelementStart(3, "input", 27, 3);
+    i0.ɵɵlistener("input", function TreeDropdownComponent_div_12_div_2_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchInput($event)); })("keydown", function TreeDropdownComponent_div_12_div_2_Template_input_keydown_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchKeyDown($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, TreeDropdownComponent_div_12_div_2_button_5_Template, 2, 0, "button", 28);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("placeholder", ctx_r1.SearchConfig.Placeholder || "Type to search...")("value", ctx_r1.SearchText);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.SearchText);
+} }
+function TreeDropdownComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20, 1);
+    i0.ɵɵtemplate(2, TreeDropdownComponent_div_12_div_2_Template, 6, 3, "div", 21);
+    i0.ɵɵelementStart(3, "div", 22)(4, "mj-tree", 23, 2);
+    i0.ɵɵlistener("SelectionChange", function TreeDropdownComponent_div_12_Template_mj_tree_SelectionChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTreeSelectionChange($event)); })("BeforeNodeSelect", function TreeDropdownComponent_div_12_Template_mj_tree_BeforeNodeSelect_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTreeBeforeNodeSelect($event)); })("AfterNodeSelect", function TreeDropdownComponent_div_12_Template_mj_tree_AfterNodeSelect_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTreeAfterNodeSelect($event)); })("BeforeDataLoad", function TreeDropdownComponent_div_12_Template_mj_tree_BeforeDataLoad_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTreeBeforeDataLoad($event)); })("AfterDataLoad", function TreeDropdownComponent_div_12_Template_mj_tree_AfterDataLoad_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTreeAfterDataLoad($event)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r1.StyleConfig.DropdownClass || "");
+    i0.ɵɵclassProp("tree-dropdown-panel--open", ctx_r1.IsOpen)("tree-dropdown-panel--above", ctx_r1.Position == null ? null : ctx_r1.Position.renderAbove)("tree-dropdown-panel--below", !(ctx_r1.Position == null ? null : ctx_r1.Position.renderAbove));
+    i0.ɵɵproperty("ngStyle", ctx_r1.IsOpen ? ctx_r1.getDropdownStyles() : i0.ɵɵpureFunction0(21, _c4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.EnableSearch);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("BranchConfig", ctx_r1.BranchConfig)("LeafConfig", ctx_r1.LeafConfig)("SelectionMode", ctx_r1.SelectionMode)("SelectableTypes", ctx_r1.SelectableTypes)("SelectedIDs", ctx_r1.getSelectedIDsArray())("AutoLoad", ctx_r1.AutoLoad)("ShowIcons", true)("ShowExpandCollapseAll", false)("AnimateExpandCollapse", true)("EmptyMessage", ctx_r1.SearchText ? "No matches found" : "No items available")("EmptyIcon", ctx_r1.SearchText ? "fa-solid fa-search" : "fa-solid fa-folder-open");
+} }
+export class TreeDropdownComponent {
+    cdr;
+    renderer;
+    // ========================================
+    // Tree Configuration (passed to inner tree)
+    // ========================================
+    /** Branch (category) entity configuration - REQUIRED */
+    BranchConfig;
+    /** Optional leaf entity configuration */
+    LeafConfig;
+    /** Selection mode: 'single' or 'multiple' */
+    SelectionMode = 'single';
+    /** What types can be selected: 'branch', 'leaf', or 'both' */
+    SelectableTypes = 'both';
+    // ========================================
+    // Value Inputs
+    // ========================================
+    /** Current selected value (CompositeKey for single, CompositeKeys for multiple) */
+    _value = null;
+    /**
+     * The selected value as a CompositeKey (single select) or array of CompositeKeys (multi-select).
+     * CompositeKey supports both simple single-field primary keys and composite primary keys.
+     *
+     * @example Single select with simple ID:
+     * ```typescript
+     * dropdown.Value = CompositeKey.FromID('some-guid');
+     * ```
+     *
+     * @example Single select with composite key:
+     * ```typescript
+     * dropdown.Value = new CompositeKey([
+     *   { FieldName: 'Field1', Value: 'value1' },
+     *   { FieldName: 'Field2', Value: 'value2' }
+     * ]);
+     * ```
+     *
+     * @example Multi-select:
+     * ```typescript
+     * dropdown.Value = [
+     *   CompositeKey.FromID('guid1'),
+     *   CompositeKey.FromID('guid2')
+     * ];
+     * ```
+     */
+    set Value(val) {
+        if (!CompositeKey.EqualsEx(val, this._value)) {
+            this._value = val;
+            // If tree is loaded, sync selection immediately
+            if (this.IsLoaded && this.treeComponent) {
+                this.syncValueToSelection();
+            }
+            else {
+                // Tree not loaded yet - fetch display text directly via Metadata
+                this.fetchDisplayTextForValue(val);
+            }
+        }
+    }
+    get Value() {
+        return this._value;
+    }
+    /** Cached display text for showing in trigger before tree loads */
+    _pendingDisplayText = null;
+    // ========================================
+    // Dropdown-specific Inputs
+    // ========================================
+    /** Placeholder text when nothing selected */
+    Placeholder = 'Select...';
+    /** Enable search filtering */
+    EnableSearch = true;
+    /** Search configuration */
+    SearchConfig = {};
+    /** Dropdown configuration */
+    DropdownConfig = {};
+    /** Style configuration */
+    StyleConfig = {};
+    /** Show clear button */
+    Clearable = true;
+    /** Disabled state */
+    Disabled = false;
+    /** Show node icons in display */
+    ShowIconInDisplay = true;
+    /** Auto-load data on init */
+    AutoLoad = true;
+    /** Show loading in trigger */
+    ShowLoadingInTrigger = true;
+    // ========================================
+    // Event Outputs
+    // ========================================
+    /** Emitted when value changes */
+    ValueChange = new EventEmitter();
+    /** Emitted with full node(s) when selection changes */
+    SelectionChange = new EventEmitter();
+    // Bubble up tree events
+    BeforeNodeSelect = new EventEmitter();
+    AfterNodeSelect = new EventEmitter();
+    BeforeSearch = new EventEmitter();
+    AfterSearch = new EventEmitter();
+    BeforeDropdownOpen = new EventEmitter();
+    AfterDropdownOpen = new EventEmitter();
+    BeforeDropdownClose = new EventEmitter();
+    AfterDropdownClose = new EventEmitter();
+    BeforeDataLoad = new EventEmitter();
+    AfterDataLoad = new EventEmitter();
+    // ========================================
+    // ViewChild References
+    // ========================================
+    triggerElement;
+    searchInput;
+    dropdownPanel;
+    treeComponent;
+    // ========================================
+    // State
+    // ========================================
+    /** Is dropdown open */
+    IsOpen = false;
+    /** Dropdown position */
+    Position = null;
+    /** Search text */
+    SearchText = '';
+    /** Selected nodes (for display) */
+    SelectedNodes = [];
+    /** Is tree loading */
+    IsLoading = false;
+    /** Has data loaded */
+    IsLoaded = false;
+    /** Dropdown portal element */
+    dropdownPortal = null;
+    /** Search debounce subject */
+    searchSubject = new Subject();
+    /** Destroy subject */
+    destroy$ = new Subject();
+    /** Click outside listener */
+    clickOutsideListener = null;
+    /** Scroll listener */
+    scrollListener = null;
+    /** Resize listener */
+    resizeListener = null;
+    /** Pending load promise resolvers */
+    _loadResolvers = [];
+    // ========================================
+    // Constructor
+    // ========================================
+    constructor(cdr, renderer) {
+        this.cdr = cdr;
+        this.renderer = renderer;
+    }
+    // ========================================
+    // Lifecycle
+    // ========================================
+    ngOnInit() {
+        // Setup search debounce
+        const debounceMs = this.SearchConfig.DebounceMs ?? 200;
+        this.searchSubject.pipe(debounceTime(debounceMs), takeUntil(this.destroy$)).subscribe(text => {
+            this.performSearch(text);
+        });
+    }
+    ngAfterViewInit() {
+        // Create portal element
+        this.createDropdownPortal();
+    }
+    // Note: Value changes are handled by the getter/setter pattern
+    // No ngOnChanges needed for that property
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.removeDropdownPortal();
+        this.removeEventListeners();
+    }
+    // ========================================
+    // Public Methods
+    // ========================================
+    /**
+     * Returns a promise that resolves when the tree data has finished loading.
+     * If data is already loaded, the promise resolves immediately.
+     *
+     * Use this method when you need to perform operations that depend on the tree
+     * being fully loaded, such as programmatically selecting nodes or accessing
+     * the tree structure.
+     *
+     * Note: For setting initial values, you typically don't need this method -
+     * just set the `Value` input and the component will automatically display
+     * the correct text by looking up the record name via Metadata.
+     *
+     * @returns A promise that resolves when the tree data is loaded
+     * @example
+     * ```typescript
+     * // Wait for tree to load before accessing tree structure
+     * await treeDropdown.WaitForDataLoad();
+     * const nodes = treeDropdown.treeComponent.Nodes;
+     * ```
+     */
+    WaitForDataLoad() {
+        if (this.IsLoaded) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            this._loadResolvers.push(resolve);
+        });
+    }
+    /**
+     * Open the dropdown
+     */
+    Open() {
+        if (this.Disabled || this.IsOpen) {
+            return;
+        }
+        // Fire before event
+        const beforeEvent = new BeforeDropdownOpenEventArgs(this);
+        this.BeforeDropdownOpen.emit(beforeEvent);
+        if (beforeEvent.Cancel) {
+            return;
+        }
+        this.IsOpen = true;
+        this.calculatePosition();
+        this.attachEventListeners();
+        // Focus search input after opening
+        setTimeout(() => {
+            if (this.EnableSearch && this.searchInput) {
+                this.searchInput.nativeElement.focus();
+            }
+        }, 50);
+        // Fire after event
+        const afterEvent = new AfterDropdownOpenEventArgs(this, this.Position?.renderAbove ? 'above' : 'below');
+        this.AfterDropdownOpen.emit(afterEvent);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Close the dropdown
+     */
+    Close(reason = 'programmatic') {
+        if (!this.IsOpen) {
+            return;
+        }
+        // Fire before event
+        const beforeEvent = new BeforeDropdownCloseEventArgs(this, reason);
+        this.BeforeDropdownClose.emit(beforeEvent);
+        if (beforeEvent.Cancel) {
+            return;
+        }
+        this.IsOpen = false;
+        this.SearchText = '';
+        this.clearSearch();
+        this.removeEventListeners();
+        // Fire after event
+        const afterEvent = new AfterDropdownCloseEventArgs(this, reason);
+        this.AfterDropdownClose.emit(afterEvent);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Toggle dropdown
+     */
+    Toggle() {
+        if (this.IsOpen) {
+            this.Close('programmatic');
+        }
+        else {
+            this.Open();
+        }
+    }
+    /**
+     * Clear selection
+     */
+    Clear(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.SelectedNodes = [];
+        this._value = null;
+        this._pendingDisplayText = null;
+        if (this.treeComponent) {
+            this.treeComponent.ClearSelection();
+        }
+        this.ValueChange.emit(this._value);
+        this.SelectionChange.emit(null);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Refresh tree data
+     */
+    async Refresh() {
+        if (this.treeComponent) {
+            await this.treeComponent.Refresh();
+        }
+    }
+    // ========================================
+    // Template Event Handlers
+    // ========================================
+    /**
+     * Handle trigger click
+     */
+    onTriggerClick() {
+        if (!this.Disabled) {
+            this.Toggle();
+        }
+    }
+    /**
+     * Handle trigger keydown
+     */
+    onTriggerKeyDown(event) {
+        if (this.Disabled) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.Open();
+                break;
+            case 'Escape':
+                if (this.IsOpen) {
+                    event.preventDefault();
+                    this.Close('escape');
+                }
+                break;
+        }
+    }
+    /**
+     * Handle search input
+     */
+    onSearchInput(event) {
+        const value = event.target.value;
+        this.SearchText = value;
+        this.searchSubject.next(value);
+    }
+    /**
+     * Handle search keydown
+     */
+    onSearchKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.Close('escape');
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                // Focus first tree node
+                if (this.treeComponent) {
+                    const visibleNodes = this.getVisibleNodesInOrder(this.treeComponent.Nodes);
+                    if (visibleNodes.length > 0) {
+                        this.treeComponent.FocusedNode = visibleNodes[0];
+                        this.cdr.detectChanges();
+                    }
+                }
+                break;
+        }
+    }
+    /**
+     * Handle clear search
+     */
+    onClearSearch() {
+        this.SearchText = '';
+        this.clearSearch();
+        if (this.searchInput) {
+            this.searchInput.nativeElement.focus();
+        }
+    }
+    /**
+     * Handle tree selection change
+     */
+    onTreeSelectionChange(nodes) {
+        this.SelectedNodes = nodes;
+        // Clear pending display text since we now have real nodes
+        this._pendingDisplayText = null;
+        // Update value - convert node IDs to CompositeKeys
+        if (this.SelectionMode === 'single') {
+            this._value = nodes.length > 0 ? CompositeKey.FromID(nodes[0].ID) : null;
+            this.ValueChange.emit(this._value);
+            this.SelectionChange.emit(nodes.length > 0 ? nodes[0] : null);
+            // Close on selection in single mode (unless disabled)
+            // Only close if user actually selected something (not on empty selection from sync)
+            if (this.DropdownConfig.CloseOnSelect !== false && nodes.length > 0) {
+                this.Close('selection');
+            }
+        }
+        else {
+            this._value = nodes.map(n => CompositeKey.FromID(n.ID));
+            this.ValueChange.emit(this._value);
+            this.SelectionChange.emit(nodes.length > 0 ? nodes : null);
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle tree data load events
+     */
+    onTreeBeforeDataLoad(event) {
+        this.IsLoading = true;
+        this.BeforeDataLoad.emit(event);
+        this.cdr.detectChanges();
+    }
+    onTreeAfterDataLoad(event) {
+        this.IsLoading = false;
+        this.IsLoaded = true;
+        // Resolve all pending WaitForDataLoad() promises
+        const resolvers = this._loadResolvers;
+        this._loadResolvers = [];
+        for (const resolve of resolvers) {
+            resolve();
+        }
+        // Sync selection after load - defer to next microtask to ensure ViewChild is resolved
+        Promise.resolve().then(() => {
+            if (this.treeComponent) {
+            }
+            this.syncValueToSelection();
+            this.cdr.detectChanges();
+        });
+        this.AfterDataLoad.emit(event);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Bubble tree events
+     */
+    onTreeBeforeNodeSelect(event) {
+        this.BeforeNodeSelect.emit(event);
+    }
+    onTreeAfterNodeSelect(event) {
+        this.AfterNodeSelect.emit(event);
+    }
+    // ========================================
+    // Private Methods
+    // ========================================
+    /**
+     * Create dropdown portal element (attached to body)
+     */
+    createDropdownPortal() {
+        this.dropdownPortal = this.renderer.createElement('div');
+        this.renderer.addClass(this.dropdownPortal, 'mj-tree-dropdown-portal');
+        this.renderer.setStyle(this.dropdownPortal, 'position', 'fixed');
+        this.renderer.setStyle(this.dropdownPortal, 'z-index', '10000');
+        this.renderer.setStyle(this.dropdownPortal, 'display', 'none');
+        this.renderer.appendChild(document.body, this.dropdownPortal);
+    }
+    /**
+     * Remove dropdown portal
+     */
+    removeDropdownPortal() {
+        if (this.dropdownPortal && this.dropdownPortal.parentNode) {
+            this.dropdownPortal.parentNode.removeChild(this.dropdownPortal);
+            this.dropdownPortal = null;
+        }
+    }
+    /**
+     * Calculate dropdown position
+     */
+    calculatePosition() {
+        if (!this.triggerElement) {
+            return;
+        }
+        const triggerRect = this.triggerElement.nativeElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        // Parse max height from config
+        const maxHeightConfig = this.DropdownConfig.MaxHeight || '300px';
+        const maxHeightPx = parseInt(maxHeightConfig, 10) || 300;
+        // Calculate available space
+        const spaceBelow = viewportHeight - triggerRect.bottom - 8; // 8px margin
+        const spaceAbove = triggerRect.top - 8;
+        // Determine if we should render above or below
+        let renderAbove = false;
+        let maxHeight = maxHeightPx;
+        if (this.DropdownConfig.Position === 'above') {
+            renderAbove = true;
+            maxHeight = Math.min(maxHeightPx, spaceAbove);
+        }
+        else if (this.DropdownConfig.Position === 'below') {
+            renderAbove = false;
+            maxHeight = Math.min(maxHeightPx, spaceBelow);
+        }
+        else {
+            // Auto position
+            if (spaceBelow < maxHeightPx && spaceAbove > spaceBelow) {
+                renderAbove = true;
+                maxHeight = Math.min(maxHeightPx, spaceAbove);
+            }
+            else {
+                renderAbove = false;
+                maxHeight = Math.min(maxHeightPx, spaceBelow);
+            }
+        }
+        // Calculate width
+        const minWidth = this.DropdownConfig.MinWidth
+            ? parseInt(this.DropdownConfig.MinWidth, 10)
+            : triggerRect.width;
+        const width = Math.max(minWidth, triggerRect.width);
+        // Ensure dropdown doesn't go off screen horizontally
+        let left = triggerRect.left;
+        if (left + width > viewportWidth - 8) {
+            left = viewportWidth - width - 8;
+        }
+        if (left < 8) {
+            left = 8;
+        }
+        // Calculate top position
+        let top;
+        if (renderAbove) {
+            top = triggerRect.top - maxHeight - 4;
+        }
+        else {
+            top = triggerRect.bottom + 4;
+        }
+        this.Position = {
+            top,
+            left,
+            width,
+            maxHeight,
+            renderAbove
+        };
+    }
+    /**
+     * Attach event listeners for click outside, scroll, resize
+     */
+    attachEventListeners() {
+        // Click outside - defer with a small timeout to:
+        // 1. Allow the opening click event to complete
+        // 2. Ensure the dropdown panel DOM element is fully rendered
+        // 3. Allow Angular change detection to complete
+        if (this.DropdownConfig.CloseOnOutsideClick !== false) {
+            setTimeout(() => {
+                // Only attach if still open (could have been closed in the meantime)
+                if (!this.IsOpen) {
+                    return;
+                }
+                this.clickOutsideListener = this.renderer.listen('document', 'click', (event) => {
+                    const target = event.target;
+                    // Double check we're still open
+                    if (!this.IsOpen) {
+                        return;
+                    }
+                    const isInsideTrigger = this.triggerElement?.nativeElement?.contains(target);
+                    // Check if click is inside the dropdown panel (rendered inline, not in portal)
+                    const isInsideDropdown = this.dropdownPanel?.nativeElement?.contains(target);
+                    if (!isInsideTrigger && !isInsideDropdown) {
+                        this.Close('outsideClick');
+                    }
+                    else {
+                    }
+                });
+            }, 100); // 100ms delay to ensure DOM is stable
+        }
+        else {
+        }
+        // Escape key
+        if (this.DropdownConfig.CloseOnEscape !== false) {
+            document.addEventListener('keydown', this.handleEscapeKey);
+        }
+        // Scroll - reposition dropdown
+        this.scrollListener = this.renderer.listen('window', 'scroll', () => {
+            if (this.IsOpen) {
+                this.calculatePosition();
+                this.updateDropdownPortalPosition();
+            }
+        });
+        // Resize - reposition dropdown
+        this.resizeListener = this.renderer.listen('window', 'resize', () => {
+            if (this.IsOpen) {
+                this.calculatePosition();
+                this.updateDropdownPortalPosition();
+            }
+        });
+    }
+    /**
+     * Remove event listeners
+     */
+    removeEventListeners() {
+        if (this.clickOutsideListener) {
+            this.clickOutsideListener();
+            this.clickOutsideListener = null;
+        }
+        document.removeEventListener('keydown', this.handleEscapeKey);
+        if (this.scrollListener) {
+            this.scrollListener();
+            this.scrollListener = null;
+        }
+        if (this.resizeListener) {
+            this.resizeListener();
+            this.resizeListener = null;
+        }
+    }
+    /**
+     * Handle escape key
+     */
+    handleEscapeKey = (event) => {
+        if (event.key === 'Escape' && this.IsOpen) {
+            this.Close('escape');
+        }
+    };
+    /**
+     * Update dropdown portal position
+     */
+    updateDropdownPortalPosition() {
+        if (!this.dropdownPortal || !this.Position) {
+            return;
+        }
+        this.renderer.setStyle(this.dropdownPortal, 'top', `${this.Position.top}px`);
+        this.renderer.setStyle(this.dropdownPortal, 'left', `${this.Position.left}px`);
+        this.renderer.setStyle(this.dropdownPortal, 'width', `${this.Position.width}px`);
+    }
+    /**
+     * Perform search on tree
+     */
+    performSearch(text) {
+        // Fire before event
+        const beforeEvent = new BeforeSearchEventArgs(this, text);
+        this.BeforeSearch.emit(beforeEvent);
+        if (beforeEvent.Cancel) {
+            return;
+        }
+        const searchText = beforeEvent.ModifiedSearchText ?? text;
+        if (!this.treeComponent) {
+            return;
+        }
+        const matchedNodes = this.treeComponent.FilterNodes(searchText, {
+            caseSensitive: this.SearchConfig.CaseSensitive,
+            searchBranches: this.SearchConfig.SearchBranches ?? true,
+            searchLeaves: this.SearchConfig.SearchLeaves ?? true,
+            searchDescription: this.SearchConfig.SearchDescription
+        });
+        // Auto-expand to show matches
+        if (this.SearchConfig.AutoExpandMatches !== false && searchText.trim()) {
+            for (const node of matchedNodes) {
+                this.treeComponent.ExpandToNode(node.ID);
+            }
+        }
+        // Fire after event
+        const afterEvent = new AfterSearchEventArgs(this, searchText, matchedNodes);
+        this.AfterSearch.emit(afterEvent);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Clear search filter
+     */
+    clearSearch() {
+        if (this.treeComponent) {
+            this.treeComponent.FilterNodes('', {});
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Get all visible nodes in tree order (for keyboard navigation)
+     */
+    getVisibleNodesInOrder(nodes) {
+        const result = [];
+        this.collectVisibleNodesRecursive(nodes, result);
+        return result;
+    }
+    collectVisibleNodesRecursive(nodes, result) {
+        for (const node of nodes) {
+            if (node.Visible) {
+                result.push(node);
+                if (node.Expanded && node.Type === 'branch') {
+                    this.collectVisibleNodesRecursive(node.Children, result);
+                }
+            }
+        }
+    }
+    /**
+     * Sync value to tree selection
+     */
+    syncValueToSelection() {
+        if (!this.treeComponent || !this.IsLoaded) {
+            return;
+        }
+        // Convert CompositeKey(s) to string IDs for tree selection
+        const ids = this.getSelectedIDsArray();
+        // Pass emitChange=false to avoid emitting SelectionChange during sync
+        // This prevents unnecessary events and parent component confusion
+        this.treeComponent.SelectNodes(ids, false);
+        // Use try-catch as defensive measure since tree component may not be fully ready
+        try {
+            this.SelectedNodes = this.treeComponent.GetSelectedNodes() || [];
+        }
+        catch {
+            this.SelectedNodes = [];
+        }
+        // Clear pending display text since we now have real nodes
+        this._pendingDisplayText = null;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Fetch display text for value before tree loads using Metadata.GetEntityRecordName
+     */
+    async fetchDisplayTextForValue(val) {
+        if (!val || !this.LeafConfig) {
+            this._pendingDisplayText = null;
+            this.cdr.detectChanges();
+            return;
+        }
+        try {
+            const md = new Metadata();
+            const entityName = this.LeafConfig.EntityName;
+            if (Array.isArray(val)) {
+                // Multiple selection
+                if (val.length === 0) {
+                    this._pendingDisplayText = null;
+                }
+                else if (val.length === 1) {
+                    this._pendingDisplayText = await md.GetEntityRecordName(entityName, val[0]);
+                }
+                else {
+                    this._pendingDisplayText = `${val.length} items selected`;
+                }
+            }
+            else {
+                // Single selection
+                this._pendingDisplayText = await md.GetEntityRecordName(entityName, val);
+            }
+        }
+        catch (error) {
+            console.warn('[TreeDropdown] Failed to fetch display text:', error);
+            this._pendingDisplayText = null;
+        }
+        this.cdr.detectChanges();
+    }
+    // ========================================
+    // Template Helpers
+    // ========================================
+    /**
+     * Get display text for selected value(s)
+     */
+    getDisplayText() {
+        // If we have selected nodes from the tree, use those
+        if (this.SelectedNodes.length > 0) {
+            if (this.SelectionMode === 'single') {
+                return this.SelectedNodes[0].Label;
+            }
+            // Multiple selection
+            if (this.SelectedNodes.length === 1) {
+                return this.SelectedNodes[0].Label;
+            }
+            return `${this.SelectedNodes.length} items selected`;
+        }
+        // If tree not loaded but we have pending display text from Metadata lookup
+        if (this._pendingDisplayText) {
+            return this._pendingDisplayText;
+        }
+        return '';
+    }
+    /**
+     * Get display icon for single selection
+     */
+    getDisplayIcon() {
+        if (!this.ShowIconInDisplay || this.SelectedNodes.length !== 1) {
+            return null;
+        }
+        return this.SelectedNodes[0].Icon;
+    }
+    /**
+     * Get display color for single selection
+     */
+    getDisplayColor() {
+        if (this.SelectedNodes.length !== 1) {
+            return null;
+        }
+        return this.SelectedNodes[0].Color || null;
+    }
+    /**
+     * Check if has selection
+     */
+    hasSelection() {
+        return this.SelectedNodes.length > 0 || this._pendingDisplayText != null;
+    }
+    /**
+     * Get dropdown panel styles
+     */
+    getDropdownStyles() {
+        if (!this.Position) {
+            return {};
+        }
+        return {
+            top: `${this.Position.top}px`,
+            left: `${this.Position.left}px`,
+            width: `${this.Position.width}px`,
+            maxHeight: `${this.Position.maxHeight}px`
+        };
+    }
+    /**
+     * Get trigger classes
+     */
+    getTriggerClasses() {
+        return {
+            'tree-dropdown-trigger': true,
+            'tree-dropdown-trigger--open': this.IsOpen,
+            'tree-dropdown-trigger--disabled': this.Disabled,
+            'tree-dropdown-trigger--has-value': this.hasSelection(),
+            'tree-dropdown-trigger--loading': this.IsLoading && this.ShowLoadingInTrigger
+        };
+    }
+    /**
+     * Get selected IDs as a string array for passing to tree component.
+     * Extracts the first key value from each CompositeKey (typically the ID field).
+     */
+    getSelectedIDsArray() {
+        if (!this._value) {
+            return [];
+        }
+        const keys = Array.isArray(this._value) ? this._value : [this._value];
+        return keys.map(key => {
+            // Get the first value from the composite key (usually the ID)
+            const firstValue = key.GetValueByIndex(0);
+            return firstValue != null ? String(firstValue) : '';
+        }).filter(id => id !== '');
+    }
+    static ɵfac = function TreeDropdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeDropdownComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeDropdownComponent, selectors: [["mj-tree-dropdown"]], viewQuery: function TreeDropdownComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+            i0.ɵɵviewQuery(_c2, 5);
+            i0.ɵɵviewQuery(_c3, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerElement = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownPanel = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.treeComponent = _t.first);
+        } }, inputs: { BranchConfig: "BranchConfig", LeafConfig: "LeafConfig", SelectionMode: "SelectionMode", SelectableTypes: "SelectableTypes", Value: "Value", Placeholder: "Placeholder", EnableSearch: "EnableSearch", SearchConfig: "SearchConfig", DropdownConfig: "DropdownConfig", StyleConfig: "StyleConfig", Clearable: "Clearable", Disabled: "Disabled", ShowIconInDisplay: "ShowIconInDisplay", AutoLoad: "AutoLoad", ShowLoadingInTrigger: "ShowLoadingInTrigger" }, outputs: { ValueChange: "ValueChange", SelectionChange: "SelectionChange", BeforeNodeSelect: "BeforeNodeSelect", AfterNodeSelect: "AfterNodeSelect", BeforeSearch: "BeforeSearch", AfterSearch: "AfterSearch", BeforeDropdownOpen: "BeforeDropdownOpen", AfterDropdownOpen: "AfterDropdownOpen", BeforeDropdownClose: "BeforeDropdownClose", AfterDropdownClose: "AfterDropdownClose", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad" }, decls: 13, vars: 16, consts: [["triggerElement", ""], ["dropdownPanel", ""], ["treeComponent", ""], ["searchInput", ""], [1, "tree-dropdown"], ["tabindex", "0", "role", "combobox", 3, "click", "keydown", "ngClass"], [1, "tree-dropdown-trigger__content"], ["class", "tree-dropdown-trigger__icon", 3, "color", 4, "ngIf"], [1, "tree-dropdown-trigger__text"], ["class", "tree-dropdown-trigger__loading", 4, "ngIf"], [1, "tree-dropdown-trigger__actions"], ["type", "button", "class", "tree-dropdown-trigger__clear", "title", "Clear selection", "tabindex", "-1", 3, "click", 4, "ngIf"], [1, "tree-dropdown-trigger__chevron"], [1, "fa-solid", 3, "ngClass"], ["class", "tree-dropdown-panel", "role", "tree", 3, "tree-dropdown-panel--open", "tree-dropdown-panel--above", "tree-dropdown-panel--below", "class", "ngStyle", 4, "ngIf"], [1, "tree-dropdown-trigger__icon"], [1, "tree-dropdown-trigger__loading"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["type", "button", "title", "Clear selection", "tabindex", "-1", 1, "tree-dropdown-trigger__clear", 3, "click"], [1, "fa-solid", "fa-times"], ["role", "tree", 1, "tree-dropdown-panel", 3, "ngStyle"], ["class", "tree-dropdown-search", 4, "ngIf"], [1, "tree-dropdown-tree"], [3, "SelectionChange", "BeforeNodeSelect", "AfterNodeSelect", "BeforeDataLoad", "AfterDataLoad", "BranchConfig", "LeafConfig", "SelectionMode", "SelectableTypes", "SelectedIDs", "AutoLoad", "ShowIcons", "ShowExpandCollapseAll", "AnimateExpandCollapse", "EmptyMessage", "EmptyIcon"], [1, "tree-dropdown-search"], [1, "tree-dropdown-search__input-wrapper"], [1, "fa-solid", "fa-search", "tree-dropdown-search__icon"], ["type", "text", "autocomplete", "off", "spellcheck", "false", 1, "tree-dropdown-search__input", 3, "input", "keydown", "placeholder", "value"], ["type", "button", "class", "tree-dropdown-search__clear", "tabindex", "-1", 3, "click", 4, "ngIf"], ["type", "button", "tabindex", "-1", 1, "tree-dropdown-search__clear", 3, "click"]], template: function TreeDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 4)(1, "div", 5, 0);
+            i0.ɵɵlistener("click", function TreeDropdownComponent_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTriggerClick()); })("keydown", function TreeDropdownComponent_Template_div_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTriggerKeyDown($event)); });
+            i0.ɵɵelementStart(3, "div", 6);
+            i0.ɵɵtemplate(4, TreeDropdownComponent_span_4_Template, 2, 4, "span", 7);
+            i0.ɵɵelementStart(5, "span", 8);
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, TreeDropdownComponent_span_7_Template, 2, 0, "span", 9);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 10);
+            i0.ɵɵtemplate(9, TreeDropdownComponent_button_9_Template, 2, 0, "button", 11);
+            i0.ɵɵelementStart(10, "span", 12);
+            i0.ɵɵelement(11, "i", 13);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(12, TreeDropdownComponent_div_12_Template, 6, 22, "div", 14);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("tree-dropdown--disabled", ctx.Disabled);
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.StyleConfig.SearchInputClass || "");
+            i0.ɵɵproperty("ngClass", ctx.getTriggerClasses());
+            i0.ɵɵattribute("aria-expanded", ctx.IsOpen)("aria-haspopup", "tree")("aria-disabled", ctx.Disabled);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.getDisplayIcon());
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("tree-dropdown-trigger__text--placeholder", !ctx.hasSelection());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.hasSelection() ? ctx.getDisplayText() : ctx.Placeholder, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.IsLoading && ctx.ShowLoadingInTrigger);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.Clearable && ctx.hasSelection() && !ctx.Disabled);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.IsOpen ? "fa-chevron-up" : "fa-chevron-down");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.IsOpen);
+        } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2.TreeComponent], styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n    \n\n    --dropdown-bg: #ffffff;\n    --dropdown-border-color: #d0d0d0;\n    --dropdown-border-hover: #999999;\n    --dropdown-border-focus: #2196f3;\n    --dropdown-text-color: #333333;\n    --dropdown-text-placeholder: #999999;\n    --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n\n    \n\n    --dropdown-trigger-bg: #ffffff;\n    --dropdown-trigger-height: 40px;\n    --dropdown-trigger-padding: 8px 12px;\n    --dropdown-trigger-radius: 8px;\n\n    \n\n    --dropdown-search-bg: #f5f5f5;\n    --dropdown-search-height: 36px;\n\n    \n\n    --dropdown-animation-duration: 150ms;\n    --dropdown-animation-easing: ease-out;\n\n    display: block;\n    position: relative;\n    width: 100%;\n}\n\n\n\n\n\n\n.tree-dropdown[_ngcontent-%COMP%] {\n    position: relative;\n    width: 100%;\n}\n\n.tree-dropdown--disabled[_ngcontent-%COMP%] {\n    opacity: 0.6;\n    pointer-events: none;\n}\n\n\n\n\n\n\n.tree-dropdown-trigger[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    min-height: var(--dropdown-trigger-height);\n    padding: var(--dropdown-trigger-padding);\n    background: var(--dropdown-trigger-bg);\n    border: 1px solid var(--dropdown-border-color);\n    border-radius: var(--dropdown-trigger-radius);\n    cursor: pointer;\n    outline: none;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-trigger[_ngcontent-%COMP%]:hover {\n    border-color: var(--dropdown-border-hover);\n}\n\n.tree-dropdown-trigger[_ngcontent-%COMP%]:focus, \n.tree-dropdown-trigger--open[_ngcontent-%COMP%] {\n    border-color: var(--dropdown-border-focus);\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);\n}\n\n.tree-dropdown-trigger--disabled[_ngcontent-%COMP%] {\n    cursor: not-allowed;\n    background: #f5f5f5;\n}\n\n.tree-dropdown-trigger__content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    overflow: hidden;\n}\n\n.tree-dropdown-trigger__icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.tree-dropdown-trigger__text[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n    color: var(--dropdown-text-color);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tree-dropdown-trigger__text--placeholder[_ngcontent-%COMP%] {\n    color: var(--dropdown-text-placeholder);\n}\n\n.tree-dropdown-trigger__loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    color: var(--dropdown-border-focus);\n    font-size: 12px;\n}\n\n.tree-dropdown-trigger__actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n}\n\n.tree-dropdown-trigger__clear[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: #e0e0e0;\n    color: #666;\n    cursor: pointer;\n    font-size: 10px;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-trigger__clear[_ngcontent-%COMP%]:hover {\n    background: #d0d0d0;\n    color: #333;\n}\n\n.tree-dropdown-trigger__chevron[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    color: var(--dropdown-text-placeholder);\n    font-size: 12px;\n    transition: transform var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-trigger--open[_ngcontent-%COMP%]   .tree-dropdown-trigger__chevron[_ngcontent-%COMP%] {\n    transform: rotate(180deg);\n}\n\n\n\n\n\n\n.tree-dropdown-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    z-index: 10000;\n    display: flex;\n    flex-direction: column;\n    background: var(--dropdown-bg);\n    border: 1px solid var(--dropdown-border-color);\n    border-radius: 8px;\n    box-shadow: var(--dropdown-shadow);\n    overflow: hidden;\n    animation: _ngcontent-%COMP%_dropdown-open var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n    \n\n    box-sizing: border-box;\n}\n\n.tree-dropdown-panel--above[_ngcontent-%COMP%] {\n    transform-origin: bottom center;\n}\n\n.tree-dropdown-panel--below[_ngcontent-%COMP%] {\n    transform-origin: top center;\n}\n\n@keyframes _ngcontent-%COMP%_dropdown-open {\n    from {\n        opacity: 0;\n        transform: scaleY(0.95);\n    }\n    to {\n        opacity: 1;\n        transform: scaleY(1);\n    }\n}\n\n\n\n\n\n\n.tree-dropdown-search[_ngcontent-%COMP%] {\n    padding: 8px;\n    border-bottom: 1px solid #e8e8e8;\n    background: var(--dropdown-search-bg);\n}\n\n.tree-dropdown-search__input-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    height: var(--dropdown-search-height);\n    padding: 0 10px;\n    background: var(--dropdown-bg);\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-search__input-wrapper[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--dropdown-border-focus);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n.tree-dropdown-search__icon[_ngcontent-%COMP%] {\n    color: #999;\n    font-size: 12px;\n    flex-shrink: 0;\n}\n\n.tree-dropdown-search__input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    color: var(--dropdown-text-color);\n    outline: none;\n    min-width: 0;\n}\n\n.tree-dropdown-search__input[_ngcontent-%COMP%]::placeholder {\n    color: var(--dropdown-text-placeholder);\n}\n\n.tree-dropdown-search__clear[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: #e0e0e0;\n    color: #666;\n    cursor: pointer;\n    font-size: 9px;\n    flex-shrink: 0;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-search__clear[_ngcontent-%COMP%]:hover {\n    background: #d0d0d0;\n    color: #333;\n}\n\n\n\n\n\n\n.tree-dropdown-tree[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n    max-height: 100%;\n}\n\n.tree-dropdown-tree[_ngcontent-%COMP%]   mj-tree[_ngcontent-%COMP%] {\n    display: block;\n    height: auto;\n    max-height: 100%;\n}\n\n\n\n.tree-dropdown-tree[_ngcontent-%COMP%]     .tree-container {\n    border-radius: 0;\n    height: auto;\n    max-height: none;\n}\n\n.tree-dropdown-tree[_ngcontent-%COMP%]     .tree-content {\n    padding: 4px 0;\n}\n\n.tree-dropdown-tree[_ngcontent-%COMP%]     .tree-node {\n    padding: 6px 12px;\n    min-height: 32px;\n}\n\n.tree-dropdown-tree[_ngcontent-%COMP%]     .tree-empty {\n    padding: 24px 16px;\n}\n\n.tree-dropdown-tree[_ngcontent-%COMP%]     .tree-loading {\n    padding: 24px 16px;\n}\n\n\n\n\n\n\n[_nghost-%COMP%]     .mj-tree-dropdown-portal {\n    pointer-events: none;\n}\n\n[_nghost-%COMP%]     .mj-tree-dropdown-portal > * {\n    pointer-events: auto;\n}\n\n\n\n\n\n\n.tree-dropdown-pills[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    padding: 4px;\n}\n\n.tree-dropdown-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 8px;\n    background: #e3f2fd;\n    border-radius: 12px;\n    font-size: 12px;\n    color: #1976d2;\n}\n\n.tree-dropdown-pill__remove[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 14px;\n    height: 14px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: #1976d2;\n    cursor: pointer;\n    font-size: 8px;\n    transition: background var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-pill__remove[_ngcontent-%COMP%]:hover {\n    background: rgba(25, 118, 210, 0.2);\n}\n\n\n\n\n\n\n@media (max-width: 480px) {\n    [_nghost-%COMP%] {\n        --dropdown-trigger-height: 44px;\n    }\n\n    .tree-dropdown-trigger__text[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n\n    .tree-dropdown-search__input[_ngcontent-%COMP%] {\n        font-size: 16px; \n\n    }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeDropdownComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-tree-dropdown', template: "<!-- Tree Dropdown Component Template -->\n<div class=\"tree-dropdown\" [class.tree-dropdown--disabled]=\"Disabled\">\n\n    <!-- Trigger Button -->\n    <div\n        #triggerElement\n        [ngClass]=\"getTriggerClasses()\"\n        [class]=\"StyleConfig.SearchInputClass || ''\"\n        tabindex=\"0\"\n        role=\"combobox\"\n        [attr.aria-expanded]=\"IsOpen\"\n        [attr.aria-haspopup]=\"'tree'\"\n        [attr.aria-disabled]=\"Disabled\"\n        (click)=\"onTriggerClick()\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n\n        <!-- Selected Value Display -->\n        <div class=\"tree-dropdown-trigger__content\">\n            <!-- Icon -->\n            <span\n                class=\"tree-dropdown-trigger__icon\"\n                *ngIf=\"getDisplayIcon()\"\n                [style.color]=\"getDisplayColor()\">\n                <i [class]=\"getDisplayIcon()\"></i>\n            </span>\n\n            <!-- Text -->\n            <span\n                class=\"tree-dropdown-trigger__text\"\n                [class.tree-dropdown-trigger__text--placeholder]=\"!hasSelection()\">\n                {{ hasSelection() ? getDisplayText() : Placeholder }}\n            </span>\n\n            <!-- Loading Spinner -->\n            <span class=\"tree-dropdown-trigger__loading\" *ngIf=\"IsLoading && ShowLoadingInTrigger\">\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            </span>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tree-dropdown-trigger__actions\">\n            <!-- Clear Button -->\n            <button\n                type=\"button\"\n                class=\"tree-dropdown-trigger__clear\"\n                *ngIf=\"Clearable && hasSelection() && !Disabled\"\n                (click)=\"Clear($event)\"\n                title=\"Clear selection\"\n                tabindex=\"-1\">\n                <i class=\"fa-solid fa-times\"></i>\n            </button>\n\n            <!-- Chevron -->\n            <span class=\"tree-dropdown-trigger__chevron\">\n                <i\n                    class=\"fa-solid\"\n                    [ngClass]=\"IsOpen ? 'fa-chevron-up' : 'fa-chevron-down'\">\n                </i>\n            </span>\n        </div>\n    </div>\n\n    <!-- Dropdown Panel (rendered in place, will be moved to portal when open) -->\n    <div\n        #dropdownPanel\n        class=\"tree-dropdown-panel\"\n        [class.tree-dropdown-panel--open]=\"IsOpen\"\n        [class.tree-dropdown-panel--above]=\"Position?.renderAbove\"\n        [class.tree-dropdown-panel--below]=\"!Position?.renderAbove\"\n        [class]=\"StyleConfig.DropdownClass || ''\"\n        [ngStyle]=\"IsOpen ? getDropdownStyles() : {}\"\n        *ngIf=\"IsOpen\"\n        role=\"tree\">\n\n        <!-- Search Input -->\n        <div class=\"tree-dropdown-search\" *ngIf=\"EnableSearch\">\n            <div class=\"tree-dropdown-search__input-wrapper\">\n                <i class=\"fa-solid fa-search tree-dropdown-search__icon\"></i>\n                <input\n                    #searchInput\n                    type=\"text\"\n                    class=\"tree-dropdown-search__input\"\n                    [placeholder]=\"SearchConfig.Placeholder || 'Type to search...'\"\n                    [value]=\"SearchText\"\n                    (input)=\"onSearchInput($event)\"\n                    (keydown)=\"onSearchKeyDown($event)\"\n                    autocomplete=\"off\"\n                    spellcheck=\"false\">\n                <button\n                    type=\"button\"\n                    class=\"tree-dropdown-search__clear\"\n                    *ngIf=\"SearchText\"\n                    (click)=\"onClearSearch()\"\n                    tabindex=\"-1\">\n                    <i class=\"fa-solid fa-times\"></i>\n                </button>\n            </div>\n        </div>\n\n        <!-- Tree -->\n        <div class=\"tree-dropdown-tree\">\n            <mj-tree\n                #treeComponent\n                [BranchConfig]=\"BranchConfig\"\n                [LeafConfig]=\"LeafConfig\"\n                [SelectionMode]=\"SelectionMode\"\n                [SelectableTypes]=\"SelectableTypes\"\n                [SelectedIDs]=\"getSelectedIDsArray()\"\n                [AutoLoad]=\"AutoLoad\"\n                [ShowIcons]=\"true\"\n                [ShowExpandCollapseAll]=\"false\"\n                [AnimateExpandCollapse]=\"true\"\n                [EmptyMessage]=\"SearchText ? 'No matches found' : 'No items available'\"\n                [EmptyIcon]=\"SearchText ? 'fa-solid fa-search' : 'fa-solid fa-folder-open'\"\n                (SelectionChange)=\"onTreeSelectionChange($event)\"\n                (BeforeNodeSelect)=\"onTreeBeforeNodeSelect($event)\"\n                (AfterNodeSelect)=\"onTreeAfterNodeSelect($event)\"\n                (BeforeDataLoad)=\"onTreeBeforeDataLoad($event)\"\n                (AfterDataLoad)=\"onTreeAfterDataLoad($event)\">\n            </mj-tree>\n        </div>\n    </div>\n</div>\n", styles: ["/**\n * Tree Dropdown Component Styles\n *\n * Uses CSS custom properties for easy theming.\n * Containers can override these variables to customize appearance.\n */\n\n/* ========================================\n   CSS Variables (Theming)\n   ======================================== */\n\n:host {\n    /* Colors */\n    --dropdown-bg: #ffffff;\n    --dropdown-border-color: #d0d0d0;\n    --dropdown-border-hover: #999999;\n    --dropdown-border-focus: #2196f3;\n    --dropdown-text-color: #333333;\n    --dropdown-text-placeholder: #999999;\n    --dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n\n    /* Trigger */\n    --dropdown-trigger-bg: #ffffff;\n    --dropdown-trigger-height: 40px;\n    --dropdown-trigger-padding: 8px 12px;\n    --dropdown-trigger-radius: 8px;\n\n    /* Search */\n    --dropdown-search-bg: #f5f5f5;\n    --dropdown-search-height: 36px;\n\n    /* Animation */\n    --dropdown-animation-duration: 150ms;\n    --dropdown-animation-easing: ease-out;\n\n    display: block;\n    position: relative;\n    width: 100%;\n}\n\n/* ========================================\n   Container\n   ======================================== */\n\n.tree-dropdown {\n    position: relative;\n    width: 100%;\n}\n\n.tree-dropdown--disabled {\n    opacity: 0.6;\n    pointer-events: none;\n}\n\n/* ========================================\n   Trigger\n   ======================================== */\n\n.tree-dropdown-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    min-height: var(--dropdown-trigger-height);\n    padding: var(--dropdown-trigger-padding);\n    background: var(--dropdown-trigger-bg);\n    border: 1px solid var(--dropdown-border-color);\n    border-radius: var(--dropdown-trigger-radius);\n    cursor: pointer;\n    outline: none;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-trigger:hover {\n    border-color: var(--dropdown-border-hover);\n}\n\n.tree-dropdown-trigger:focus,\n.tree-dropdown-trigger--open {\n    border-color: var(--dropdown-border-focus);\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);\n}\n\n.tree-dropdown-trigger--disabled {\n    cursor: not-allowed;\n    background: #f5f5f5;\n}\n\n.tree-dropdown-trigger__content {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    overflow: hidden;\n}\n\n.tree-dropdown-trigger__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.tree-dropdown-trigger__text {\n    flex: 1;\n    font-size: 14px;\n    color: var(--dropdown-text-color);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tree-dropdown-trigger__text--placeholder {\n    color: var(--dropdown-text-placeholder);\n}\n\n.tree-dropdown-trigger__loading {\n    display: flex;\n    align-items: center;\n    color: var(--dropdown-border-focus);\n    font-size: 12px;\n}\n\n.tree-dropdown-trigger__actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n}\n\n.tree-dropdown-trigger__clear {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: #e0e0e0;\n    color: #666;\n    cursor: pointer;\n    font-size: 10px;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-trigger__clear:hover {\n    background: #d0d0d0;\n    color: #333;\n}\n\n.tree-dropdown-trigger__chevron {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    color: var(--dropdown-text-placeholder);\n    font-size: 12px;\n    transition: transform var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-trigger--open .tree-dropdown-trigger__chevron {\n    transform: rotate(180deg);\n}\n\n/* ========================================\n   Dropdown Panel\n   ======================================== */\n\n.tree-dropdown-panel {\n    position: fixed;\n    z-index: 10000;\n    display: flex;\n    flex-direction: column;\n    background: var(--dropdown-bg);\n    border: 1px solid var(--dropdown-border-color);\n    border-radius: 8px;\n    box-shadow: var(--dropdown-shadow);\n    overflow: hidden;\n    animation: dropdown-open var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n    /* Ensure the panel respects its maxHeight and allows child scrolling */\n    box-sizing: border-box;\n}\n\n.tree-dropdown-panel--above {\n    transform-origin: bottom center;\n}\n\n.tree-dropdown-panel--below {\n    transform-origin: top center;\n}\n\n@keyframes dropdown-open {\n    from {\n        opacity: 0;\n        transform: scaleY(0.95);\n    }\n    to {\n        opacity: 1;\n        transform: scaleY(1);\n    }\n}\n\n/* ========================================\n   Search\n   ======================================== */\n\n.tree-dropdown-search {\n    padding: 8px;\n    border-bottom: 1px solid #e8e8e8;\n    background: var(--dropdown-search-bg);\n}\n\n.tree-dropdown-search__input-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    height: var(--dropdown-search-height);\n    padding: 0 10px;\n    background: var(--dropdown-bg);\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-search__input-wrapper:focus-within {\n    border-color: var(--dropdown-border-focus);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n.tree-dropdown-search__icon {\n    color: #999;\n    font-size: 12px;\n    flex-shrink: 0;\n}\n\n.tree-dropdown-search__input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    color: var(--dropdown-text-color);\n    outline: none;\n    min-width: 0;\n}\n\n.tree-dropdown-search__input::placeholder {\n    color: var(--dropdown-text-placeholder);\n}\n\n.tree-dropdown-search__clear {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: #e0e0e0;\n    color: #666;\n    cursor: pointer;\n    font-size: 9px;\n    flex-shrink: 0;\n    transition: all var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-search__clear:hover {\n    background: #d0d0d0;\n    color: #333;\n}\n\n/* ========================================\n   Tree Container\n   ======================================== */\n\n.tree-dropdown-tree {\n    flex: 1;\n    overflow: auto;\n    min-height: 0;\n    max-height: 100%;\n}\n\n.tree-dropdown-tree mj-tree {\n    display: block;\n    height: auto;\n    max-height: 100%;\n}\n\n/* Override tree styles for dropdown context */\n.tree-dropdown-tree ::ng-deep .tree-container {\n    border-radius: 0;\n    height: auto;\n    max-height: none;\n}\n\n.tree-dropdown-tree ::ng-deep .tree-content {\n    padding: 4px 0;\n}\n\n.tree-dropdown-tree ::ng-deep .tree-node {\n    padding: 6px 12px;\n    min-height: 32px;\n}\n\n.tree-dropdown-tree ::ng-deep .tree-empty {\n    padding: 24px 16px;\n}\n\n.tree-dropdown-tree ::ng-deep .tree-loading {\n    padding: 24px 16px;\n}\n\n/* ========================================\n   Portal Container (in body)\n   ======================================== */\n\n:host ::ng-deep .mj-tree-dropdown-portal {\n    pointer-events: none;\n}\n\n:host ::ng-deep .mj-tree-dropdown-portal > * {\n    pointer-events: auto;\n}\n\n/* ========================================\n   Multiple Selection Pills\n   ======================================== */\n\n.tree-dropdown-pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    padding: 4px;\n}\n\n.tree-dropdown-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 8px;\n    background: #e3f2fd;\n    border-radius: 12px;\n    font-size: 12px;\n    color: #1976d2;\n}\n\n.tree-dropdown-pill__remove {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 14px;\n    height: 14px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: #1976d2;\n    cursor: pointer;\n    font-size: 8px;\n    transition: background var(--dropdown-animation-duration) var(--dropdown-animation-easing);\n}\n\n.tree-dropdown-pill__remove:hover {\n    background: rgba(25, 118, 210, 0.2);\n}\n\n/* ========================================\n   Responsive\n   ======================================== */\n\n@media (max-width: 480px) {\n    :host {\n        --dropdown-trigger-height: 44px;\n    }\n\n    .tree-dropdown-trigger__text {\n        font-size: 15px;\n    }\n\n    .tree-dropdown-search__input {\n        font-size: 16px; /* Prevents zoom on iOS */\n    }\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], { BranchConfig: [{
+            type: Input
+        }], LeafConfig: [{
+            type: Input
+        }], SelectionMode: [{
+            type: Input
+        }], SelectableTypes: [{
+            type: Input
+        }], Value: [{
+            type: Input
+        }], Placeholder: [{
+            type: Input
+        }], EnableSearch: [{
+            type: Input
+        }], SearchConfig: [{
+            type: Input
+        }], DropdownConfig: [{
+            type: Input
+        }], StyleConfig: [{
+            type: Input
+        }], Clearable: [{
+            type: Input
+        }], Disabled: [{
+            type: Input
+        }], ShowIconInDisplay: [{
+            type: Input
+        }], AutoLoad: [{
+            type: Input
+        }], ShowLoadingInTrigger: [{
+            type: Input
+        }], ValueChange: [{
+            type: Output
+        }], SelectionChange: [{
+            type: Output
+        }], BeforeNodeSelect: [{
+            type: Output
+        }], AfterNodeSelect: [{
+            type: Output
+        }], BeforeSearch: [{
+            type: Output
+        }], AfterSearch: [{
+            type: Output
+        }], BeforeDropdownOpen: [{
+            type: Output
+        }], AfterDropdownOpen: [{
+            type: Output
+        }], BeforeDropdownClose: [{
+            type: Output
+        }], AfterDropdownClose: [{
+            type: Output
+        }], BeforeDataLoad: [{
+            type: Output
+        }], AfterDataLoad: [{
+            type: Output
+        }], triggerElement: [{
+            type: ViewChild,
+            args: ['triggerElement']
+        }], searchInput: [{
+            type: ViewChild,
+            args: ['searchInput']
+        }], dropdownPanel: [{
+            type: ViewChild,
+            args: ['dropdownPanel']
+        }], treeComponent: [{
+            type: ViewChild,
+            args: ['treeComponent']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDropdownComponent, { className: "TreeDropdownComponent", filePath: "src/lib/tree-dropdown/tree-dropdown.component.ts", lineNumber: 68 }); })();
+//# sourceMappingURL=tree-dropdown.component.js.map